Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


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
  • 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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
No other job is as rewarding and demanding as building an iPhone app is. It is not really in the hands of the developer for the success of an iPhone app. Many factors operate jointly for every iOS application's success in the market.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses
Course of the Month15 days, 6 hours left to enroll

577 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