PDA

View Full Version : hover effect just cant work!



nasyitah08
Mar 2nd, 2012, 10:43 AM
hi all, i'm having this problem since monday been trying to figure it out.

The child will inherit the parents hover effect even when the child is not being hovered! if i remove the parent's style, the child will follow. they just cant seem to separate the classes.

Here are the codes:

http://jsfiddle.net/nasyitah08/xj84Q/8/

ignore the broken image as that is an image of an arrow.


Here is the image of what i have to achieve:

http://img69.imageshack.us/img69/7426/rollover.png (http://imageshack.us/photo/my-images/69/rollover.png/)

thank you in advance!

SB65
Mar 2nd, 2012, 10:53 AM
It's because this css:


#menuwrapper ul li:hover a{
color:#000;
background-color:#d4edf2;
width:185px;


affects all anchor tags within the hovered li, including the second level. Normally you could avoid this by using:


#menuwrapper ul li:hover > a{
color:#000;
background-color:#d4edf2;
width:185px;


so the style applies only to direct children (not supported in IE6). But here, because you have a div tag as well, you need to negate this on the second level this by applying this as well:


#menuwrapper ul li:hover li a{
color:#0680AD;
background-color:white;

}

nasyitah08
Mar 5th, 2012, 03:55 AM
Thank you so much SB! Thats a great help :) I appreciate it!

However, after i add in the >, the hover effect background color doesnt change. Is there anything wrong with my code?

Here is how it looks like right now:

http://jsfiddle.net/nasyitah08/UvqPc/40/

Seems like the hover effect have been removed completely on the child but however the parent no longer has the hover effect :(

Hopefully you'll be able to guide me thru this. THANK YOU SO MUCH! :o

nasyitah08
Mar 5th, 2012, 06:14 AM
no worries! i think i got it!! :thumbsup:

http://jsfiddle.net/nasyitah08/xj84Q/11/