asked on

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 ** ]
<tr>
<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>

<a href="http://www.fakesite.com/index.php?main_page=product_info&products_id=7">Photo For Sale</a><br>$100.00</div>
</td>
</tr>
[ ** 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 ** ]

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

munkywrench

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>

</td>

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 L

ASKER

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

Beginning CSS Tutorial
http://codepunk.hardwar.org.uk/bcss.htm

Advanced CSS Tutorial
http://codepunk.hardwar.org.uk/acss.htm

Jerry L

ASKER

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

ASKER CERTIFIED SOLUTION

PAQ_Man

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial