SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trigger hover event on the parent when the child hover is active?



    In the markup elements below, I'm setting background element on the a elements during the hover event.

    What I'm trying to figure is how to make the parent element maintain its hover background state while the child items hover event is active.

    Since there is no parent selector in css, I'm not sure how or if it can be done.

    Code:
    <li id="menu-item-18" class="menu-item"><a href="#">About Us</a> 
    <ul class="sub-menu"> 
    	<li class="menu-item"><a href="#">Contact Us</a></li> 
    	<li class="menu-item"><a href="#">Privacy Policy</a></li> 
    </ul> 
    </li>
    In other words, when "Contact Us" is hovered over, I want "About Us" to have a background image.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You can do it by giving a rule for

    Code:
    li:hover {}
    Since the nested UL is within that LI, the rule will still apply when you are hovering over the nested list. If you don't want the same background on the sub LIs, you can either give a special class to the top level LIs (or use the given ID) or override the hover effect on sub LIs with a more specific rule.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    As Ralph said

    If your round image is applied to the anchor then you would still use the same approach.

    li:hover a{background:red}/* top level image or color*/
    li:hover li a{background:green}/* turn off the effect on nested lists*/
    li:hover li a:hover{background:blue}/* re-instate hover for nested list anchors */


    If you have multiple level flyouts then it gets a little tricky as you have to repeat the same for each level.

    You can see the red highlight showing the effect you need on this old demo. It leaves a trail through all the flyouts (hover services).

  4. #4
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    As Ralph said

    If your round image is applied to the anchor then you would still use the same approach.

    li:hover a{background:red}/* top level image or color*/
    li:hover li a{background:green}/* turn off the effect on nested lists*/
    li:hover li a:hover{background:blue}/* re-instate hover for nested list anchors */


    If you have multiple level flyouts then it gets a little tricky as you have to repeat the same for each level.

    You can see the red highlight showing the effect you need on this old demo. It leaves a trail through all the flyouts (hover services).
    Perfect as usual :-)

    Thanks Paul.


Bookmarks

Posting Permissions

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