|
Onhover problem with background color change
|
ShaF
#:3601090
| 10:33 pm on Mar. 14, 2008 (utc 0) |
Hi Guys, I am adding a list, the problem is that some of the items (odd) onhover change the background colour whereas with others (even) the background stays the same. All item backgrounds should change onhover. See code below: HTML:
<div id="rows">
<ul>
<li><a href=""><span class="odd">Rome Special (Flight + Hotel)</span></a></li>
<li><a href=""><span class="even">Rome Special (Flight + Hotel)</span></a></li>
<li><a href=""><span class="odd">Rome Special (Flight + Hotel)</span></a></li>
<li><a href=""><span class="even">Rome Special (Flight + Hotel)</span></a></li>
</ul>
</div> CSS:
div#rows {
width : 500px;
background-color : #dbe5f7;
display : block;
text-decoration : none;
font-size : 95%;
} ul {
list-style : none;
margin : 0;
padding : 0;
} .odd {
display : block;
text-indent : 10px;
padding : 5px;
} .even {
background-color : #b6c6e1;
display : block;
text-indent : 10px;
padding : 5px;
} #rows a:hover {
display : block;
color : #415387;
background-color: #f2f4e0;
text-decoration : underline;
}
|
MarkFilipak
#:3601179
| 1:48 am on Mar. 15, 2008 (utc 0) |
I think this does what you want.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"/>
<html>
<meta http-equiv = 'Content-Type' content = 'text/html; charset = ISO-8859-1'>
<meta http-equiv = 'Content-Language' content = 'en'>
<meta http-equiv = 'Content-Script-Type' content = 'text/javascript'>
<meta http-equiv = 'Content-Style-Type' content = 'text/css'>
<meta http-equiv = 'Expires' content = 'Thu, 01 Jan 1970 00:00:00 GMT'>
<meta http-equiv = 'Pragma' content = 'no-cache'>
<meta http-equiv = 'Cache-Control' content = 'no-cache'>
<style>
div#rows
{width:500px;font-size:95%}
ul
{list-style:none;margin:0;padding:0}
.odd
{background-color:#dbe5f7;display:block;text-indent:10px;padding:5px}
.even
{background-color:#b6c6e1;display:block;text-indent:10px;padding:5px}
#rows a:hover
{color:#415387;background-color:#f2f4e0}
</style>
</head>
<body>
<div id="rows">
<ul>
<li><a href="" class="odd">Rome Special (Flight + Hotel)</a></li>
<li><a href="" class="even">Rome Special (Flight + Hotel)</a></li>
<li><a href="" class="odd">Rome Special (Flight + Hotel)</a></li>
<li><a href="" class="even">Rome Special (Flight + Hotel)</a></li>
</ul>
</div>
</body>
</html>
|
|
You were trying to change the background color of the span-elements by changing the a-element:hover.
Removed the span-elements -- redundant.
I cleaned up the CSS a little.
|
MarkFilipak
#:3601181
| 1:54 am on Mar. 15, 2008 (utc 0) |
May I make some comments about your code? > {width:500px;font-size:95%}
Unless an ancestor has an absolute font-size in 'px', 'pt', or some other absolute unit, font-size will change when/if the visitor changes text size in the browser. If you are relying on the text fitting into 500px, the layout may get corrupted. There are two alternative approaches: Specify everything in 'em' (preferred), or specify an absolute font-size (like font-size:15px) instead of font-size:95%.
|
ShaF
#:3601481
| 3:16 pm on Mar. 15, 2008 (utc 0) |
Thanks for the reply guys. Mark, the font and size was already determined in the main css file. I have managed to get it to work in FF but it doesn't work in IE6. See code below: div#rows {
width : 500px;
/*background-color : #dbe5f7;*/
display : block;
text-decoration : none;
font-size : 95%;
} ul {
list-style : none;
margin : 0;
padding : 0;
} .odd {
background-color : #dbe5f7;
display : block;
text-indent : 10px;
padding : 5px;
} .even {
background-color : #b6c6e1;
display : block;
text-indent : 10px;
padding : 5px;
} .odd:hover {
display : block;
color : #415387;
background-color: #f2f4e0;
text-decoration : underline;
} .even:hover {
display : block;
color : #415387;
background-color: #f2f4e0;
text-decoration : underline;
} <div id="rows">
<ul>
<li><a href=""><span class="odd">Rome Special (Flight + Hotel)</span></a></li>
<li><a href=""><span class="even">Rome Special (Flight + Hotel)</span></a></li>
<li><a href=""><span class="odd">Rome Special (Flight + Hotel)</span></a></li>
<li><a href=""><span class="even">Rome Special (Flight + Hotel)</span></a></li>
</ul>
</div>
|
SuzyUK
#:3601484
| 3:24 pm on Mar. 15, 2008 (utc 0) |
Welcome to WebmasterWorld, ShaF! Mark's code will work, it's the bit about redundant spans that's important.. take a look at his code again and see how he's moved the classes onto the <a>, and removed the span (which was not necessary) - this then lets you apply the backgrounds etc.. and then the :hover to the <a> instead the reason IE6 is not working for you is that IE versions less than 7 do not support :hover on anything but an anchor..<a>, but in your code you're applying the hover to the span. hth [edited by: SuzyUK at 3:28 pm (utc) on Mar. 15, 2008]
|
MarkFilipak
#:3601754
| 1:28 am on Mar. 16, 2008 (utc 0) |
> it's the bit about redundant spans that's important Suzy! You're so sharp. There's no getting anything past your sharp eyes (and keen mind).
|
swa66
#:3602117
| 3:39 pm on Mar. 16, 2008 (utc 0) |
Actually if those crafting browsers would care to read CSS specs, there is a perfect CSS solution that allows e.g. odd or even children to receive different attributes. It goes much further than odd or even to. http://www.w3.org/Style/Examples/007/evenodd Don't think browsers implement it (yet).
|
