Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Software - Troubleshooting and Discussion > Developer Center > Style parent on child hover with CSS?

Style parent on child hover with CSS?
Thread Tools
madmacgames
Grizzled Veteran
Join Date: Oct 2003
Status: Offline
Reply With Quote
Feb 28, 2005, 12:13 PM
 
Does anyone if it is possible to style a parent on a child hover? Yes yes I know you can with javascript, but I am talking about with only CSS.

This is for a drop-down CSS menu where I'd like the parent (i.e, main menu item) to stay highlighted when moving onto any of its children.

I'm using lists + CSS to create the dropdown menus. briefly the XHTML code looks like:

Code:
<ul id="nav"> <!-- BEGIN navigationMenus --> <li id="{id}"><a href="#">{text}</a> <ul> <!-- BEGIN menu --> <!-- IF link --> <li><a href="{link}">{text}</a></li> <!-- ELSE --> <li><span class="submenuHeader">{text}</span></li> <!-- ENDIF link --> <!-- END menu --> </ul> </li> <!-- END navigationMenus --> </ul>
So basically I am wanting to style the <li id="{id}"> part when its <ul> child it being hovered over.

I've tried playing around a bit with the < and > tags in CSS, but I'm not sure I completely understand them and couldn't make a go of it.
The only thing necessary for evil to flourish is for good men to do nothing
- Edmund Burke
     
headbirth
Mac Elite
Join Date: May 2002
Status: Offline
Reply With Quote
Mar 1, 2005, 07:30 AM
 
That's a great question.

I don't have the experience to help you off hand, but I did a quick search in Google with the words "child hover"+css and turned up a few items.

Here's one:

http://archivist.incutio.com/viewlist/css-discuss/47572
     
Millennium
Clinically Insane
Join Date: Nov 1999
Status: Offline
Reply With Quote
Mar 1, 2005, 07:54 AM
 
Is there a < selector in CSS? I know about the > selector, but I've never heard of a < one.

In any case, if you hover over a child element, you should still be hovering over the parent, pretty much by definition. I'm not sure it's possible to create a second hover state for an element whose children are being hovered over, but the first hover state should be maintained. Eric Meyer's Pure CSS Menus demo depends on this phenomenon.

So basically, what you need to do is apply your styles to #id:hover as though that were the only element. Even when you hover over its child UL, you're still hovering over the LI, because the UL is inside the LI. You can then style the UL by itself. This may require some interesting rearrangement of your CSS properties, but in the end it should work.

Oh, and it's worth keeping in mind that none of this will work in IE/Windows unless you're using something akin to the IE7 JavaScript routines. If that's OK with you then go right ahead, but it's something you should be aware of.
You are in Soviet Russia. It is dark. Grue is likely to be eaten by YOU!
     
madmacgames  (op)
Grizzled Veteran
Join Date: Oct 2003
Status: Offline
Reply With Quote
Mar 1, 2005, 03:24 PM
 
Many thanks...

Just as a note, I also needed a #nav ul li:hover > a entry to keep the text color of the parent the same. Otherwise, the li would stay highlighted, but the text color would change back as soon as moved off of it to the ul child.

Now I have some nice menus for my administration area that are not too bad on the eyes

( Last edited by madmacgames; Mar 1, 2005 at 03:31 PM. )
The only thing necessary for evil to flourish is for good men to do nothing
- Edmund Burke
     
   
Thread Tools
 
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Top
Privacy Policy
All times are GMT -4. The time now is 12:53 AM.
All contents of these forums © 1995-2017 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2017, Jelsoft Enterprises Ltd.,