On 7/10/06, Karl Jacobs <[EMAIL PROTECTED]> wrote:
> As you know, in a dropdown/flyout menu, if you have a item's
> background change using a:hover, once you roll off of that to the
> next level of the dropdown (I currently have 3 levels). the
> background change goes away.
>
> What I would like to do is to (without fancy javascript) keep the
> item "highlighted" while it's child elements are rolled over.
Hi, Karl,
You can do this in CSS with browsers that support child selectors, and
:hover on tags other than "A" -- that is, almost anything except IE
less than 7:
Let's say we have a navigation like so:
<ul id="nav">
<li><a href="">Item 1</a>
<ul>
<li><a href="">Item 1.1</a></li>
...
</ul>
</li>
...
</ul>
Instead of
#nav a:hover {
highlighted properties
}
try
#nav li:hover > a:link,
#nav li:hover > a:visited {
highlighted properties
}
We'll have to wait for IE 7 for those rules to work in IE. Until then,
you'll need mouseover and mouseout event handlers on the LI's to add
or remove classes on the "A" tags:
<li onmouseover="this.getElementsByTagName('A').item[0].className =
'selected'" onmouseout="this.getElementsByTagName('A').item[0].className
= ''">
....
#nav a:link.selected,
#nav a:visited.selected,
#nav a:hover {
highlighted properties
}
(Probably the event handlers are going to get in the way in the HTML,
and should be applied from a JS file, but this would be the general
idea.)
HTH,
Michael
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
