Forum Moderators: not2easy
I have some elements (li) that have :hover applied to show the background of a child, the effect being that the li is highlighted on mouseover:
.search_results .listing .orange {
background: none;
}
.search_results .listing .orange>.left,
.search_results .listing .orange>.right,
.search_results .listing .buttons {
visibility: hidden;
}
.search_results .listing:hover {
background-color: white;
}
.search_results .listing:hover .rounded-left.orange {
background: transparent url(/images/orange/left.png) repeat-y 0 0;
}
.search_results .listing:hover .rounded-right.orange {
background: transparent url(/images/orange/right.png) repeat-y top right;
}
.search_results .listing:hover .rounded-top.orange {
background: transparent url(/images/orange/top.png) repeat-x 0 0;
}
.search_results .listing:hover .rounded-bottom.orange {
background: transparent url(/images/orange/bottom.png) repeat-x bottom center;
}
.search_results .listing:hover .orange>.left,
.search_results .listing:hover .orange>.right,
.search_results .listing:hover .buttons {
visibility: visible;
}
I also know that IE7 needs a strict doctype to kick in standards mode, and as such I'm using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
And it works! Well, sort of. It works in FF and Opera. In IE7 it works correctly only so long as the cursor is over actual content in the li. So if the mouse is over text, the background shows up, but as soon as the mouse moves to a blank part of the li, the background disappears.
Any ideas?
Let me know if you want me to whip up a minimalized example; I thought someone might know what's going on without the need for that.
Thanks!
P.S. I know "orange" isn't a semantic class name, but it makes sense in the context of the API.
[edited by: Robin_reala at 7:12 pm (utc) on July 17, 2007]
Thanks.
