Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2012
    Location
    Singapore
    Posts
    21
    Thanks
    2
    Thanked 1 Time in 1 Post

    Thumbs down hover effect just cant work!

    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:



    thank you in advance!

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    It's because this css:

    Code:
    #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:

    Code:
    #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:

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

  • Users who have thanked SB65 for this post:

    nasyitah08 (03-05-2012)

  • #3
    New Coder
    Join Date
    Feb 2012
    Location
    Singapore
    Posts
    21
    Thanks
    2
    Thanked 1 Time in 1 Post
    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!

  • #4
    New Coder
    Join Date
    Feb 2012
    Location
    Singapore
    Posts
    21
    Thanks
    2
    Thanked 1 Time in 1 Post

    Resolved!

    no worries! i think i got it!!

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •