Stylesheet.css File Syntax - Modify Image Hover Style - #ID IMG:HOVER ?

I'm trying to change the 'hover' background color of the table cell inside which is the photo.  At the same time, I don't want to affect the 'hover' background color of the title text which is below the photo.   It is quite possible that I only need a lesson on stylesheet file syntax.  I've looked at W3 but didn't find readily.  Precise links referencing my issue might  be all I need.

I have isolated the style identifiers as follows -

     CLASS           =  leftboxcontent
     ID                 =  featured-content
     HTML TAGS   =   "a"    and     "img"

The stylesheet includes the following settings. (see below)  These provide the CORRECT photo hover effect, but they also affect the title text hover color which I don't want --

            #featured-content   a:hover  {
            background-color:   #000000;
I've tried using the "img" tag but it does not work.   If I could use the "img" tag, that would probably solve the problem because it would just the image and not the entire anchor link referenced by "a:hover".  The stylesheet syntax I tried was the following  which does not work  --
              #featured-content   img:hover {  ...  }

I would appreciate any ideas.  Thank you.

  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -

Here is the HTML code as seen from Firefox, "View Selection Source"  (extra spacing added for clarity)  --

[ **  CODE  ** ]
       <td colspan="3"        class="leftboxcontent"         id="featured-content">

       <div   align="center">

       <a   href="">
       <img    src="images/House%206.jpg"   alt="Photo1 - the photo"   title="Photo1"   border="0" height="75" width="100">

       <a     href="">Photo For Sale</a><br>$100.00</div>    
[ **  CODE  ** ]

  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -

Here is the relevant  "stylesheet.css"  settings--

[ **  CODE  ** ]
.leftboxcontent {
        background-color:      #000000;
        background:               #000000;
.leftboxcontent  a  {
        color:                #FDD766;
        font-size:           11px;
        font-weight:       bold;
        text-decoration:  none;
        line-height:            15px;
        display:             block;
        text-indent:       15px;
.leftboxcontent   a:hover  {
        color:                   #403D30;
        background-color: #FDD766;
        font-size:              11px;
        font-weight:          bold;
        text-decoration:     none;
        line-height:          15px;
        display:                block;
        text-indent:           15px;
.leftboxcontent input  {
        color:                   #403D30;
        background-color: #FDF1AF;
        font-size:             9px;
        font-weight:        bold;
        text-decoration:   none;
        line-height:         9px;
        display:              block;
        text-indent:         0px;
.leftboxcontent  input:hover  {
        color:               #403D30;
        background-color: #F3C94C;
        font-size:              9px;
        font-weight:          bold;
        text-decoration:     none;
        line-height:           9px;
        display:                   block;
        text-indent:            0px;
#featured-content   a:hover  {           /*  FEATURED - CONTENT  */
        background-color:   #000000;
[ **  CODE  ** ]

  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -
Jerry LAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

You could always do:

.no_hover {

   background-color: #yournormalcolor;


and then:

 <a     href="" class="no_hover">Photo For Sale</a><br>$100.00</div>    

Although as it sounds like you want two different content styles, why not instead of applying the class to the <td> apply it to the div, and have one div for the photo, and one div for the link?

You should be able to use #featured-content:image:hover {  .... but it won't work on all browsers (e.g IE). Firefox will be quite happy with it though.

Hope that helps.

Jerry LAuthor Commented:
I found a website that provides tutorials for Stylesheets and other html issues.

Beginning CSS Tutorial

Advanced CSS Tutorial
Jerry LAuthor Commented:
I provided my own solution as posted in the last comment.
PAQed with points refunded (250)

Community Support Moderator

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.