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

Posted on 2005-04-01
Medium Priority
Last Modified: 2008-01-09
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="http://www.fakesite.com/index.php?main_page=product_info&products_id=7">
       <img    src="images/House%206.jpg"   alt="Photo1 - the photo"   title="Photo1"   border="0" height="75" width="100">

       <a     href="http://www.fakesite.com/index.php?main_page=product_info&products_id=7">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  ** ]

  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -
Question by:WizeOwl
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2

Expert Comment

ID: 13679204
You could always do:

.no_hover {

   background-color: #yournormalcolor;


and then:

 <a     href="http://www.fakesite.com/index.php?main_page=product_info&products_id=7" 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.


Author Comment

ID: 13691130
I found a website that provides tutorials for Stylesheets and other html issues.

Beginning CSS Tutorial

Advanced CSS Tutorial

Author Comment

ID: 13911309
I provided my own solution as posted in the last comment.

Accepted Solution

PAQ_Man earned 0 total points
ID: 13963862
PAQed with points refunded (250)

Community Support Moderator

Featured Post

WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question