This is Interesting: Free Magazines for Graphics designers and webmasters  


Home > Archive > Stylesheets > March 2007 > apply styles to parent on hover





You are viewing an archived Text-only version of the thread. To view this thread in it's original format and/or if you want to reply to this thread please [click here]

Author apply styles to parent on hover
Bri

2007-03-05, 6:18 pm

I'm working with a pure css menu.

The 'look' is like tabs created by having a background image applied
to the li and the other end of the tab applied to the background of
the anchor <a> residing in that li.

Some of the tabs have 'submenus'. When a submenu item is being
hovered over I would like to make it appear as if the tab is also
selected.

I have achieved this for the parent li but not for the anchor tag.

Does anyone know how I would do this?

eg.
When hovering on one of the 'b' listitems I would like to apply a
style to the li containing 'c' and to the anchor tag containing 'c'.


<ul class="rootu">
<li><a href="#">a</a></li>
<li><a href="#">c</a>
<ul class="subu">
<li><a href="#">b</a></li>
<li><a href="#">b</a></li>
<li><a href="#">b</a></li>
<li><a href="#">b</a></li>
<li><a href="#">b</a></li>
</ul>
</li>
<li><a href="#">e</a></li>
<li><a href="#">f</a></li>
<li><a href="#">g</a></li>
</ul>
Holy Batman!

2007-03-06, 6:22 pm

On Mon, 05 Mar 2007 19:15:22 GMT, Bri <reply@thegroups.thx> wrote:

>I'm working with a pure css menu.
>
>The 'look' is like tabs created by having a background image applied
>to the li and the other end of the tab applied to the background of
>the anchor <a> residing in that li.
>
>Some of the tabs have 'submenus'. When a submenu item is being
>hovered over I would like to make it appear as if the tab is also
>selected.
>
>I have achieved this for the parent li but not for the anchor tag.
>
>Does anyone know how I would do this?
>
>eg.
>When hovering on one of the 'b' listitems I would like to apply a
>style to the li containing 'c' and to the anchor tag containing 'c'.
>
>
> <ul class="rootu">
> <li><a href="#">a</a></li>
> <li><a href="#">c</a>
> <ul class="subu">
> <li><a href="#">b</a></li>
> <li><a href="#">b</a></li>
> <li><a href="#">b</a></li>
> <li><a href="#">b</a></li>
> <li><a href="#">b</a></li>
> </ul>
> </li>
> <li><a href="#">e</a></li>
> <li><a href="#">f</a></li>
> <li><a href="#">g</a></li>
></ul>


something along these lines worked:

ul.rootu li:hover a{background:url(../gfx/tabs_left.gif) no-repeat 0em
0em #fff;}

ul.rootu li:hover{background:url(../gfx/tabs_right.gif) no-repeat
right top #fff;}

(at least in uplevel browsers)
Sponsored Links


Copyright 2003 - 2008 forum4designers.com  Software forum  Computer Hardware reviews