WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Change style of whole UL when hover over LI BUT make change specific to each LI (6 posts)

  1. WPLaura
    Member
    Posted 7 months ago #

    Hello

    I am writing a website in WordPress where I have created a child theme for the twentythirteen theme.

    I am now trying to style the header navigation menu.

    I would like to make it so that the text of each item in the menu changes to a different colour when you hover over it i.e. the text is all grey in it's normal state, but when you hover over menu item 1, the text of that link turns orange, when you hover over menu item 2, the text of that link turns green etc

    I have achieved this fine, using css statements that target each individual item in the menu:

    li.menu-item-29:hover > a, .menu-item-29 a:focus {
    	color: #00AEA1;
    }

    However, I also have a style attached to the ul as a whole:

    ul.nav-menu, div.nav-menu > ul {
    	border-bottom: 3px solid #D86637;
    }

    This shows as a line underneath the whole menu. And I would like to make it so that when you hover over menu item 1, not only does the text of that item change to orange, but so does this underline affecting the whole ul, and when you hover over menu item 2 not only does the text of that item change to green, but so does the underline affecting the whole ul etc

    So, in summary, I am asking if it is possible, when hovering over each individual li in an ul, to change the border-bottom property of the whole ul, BUT make the change specific to which li has been hovered over.

    Many thanks.

  2. salsaturation
    Member
    Posted 7 months ago #

    Hi Laura

    Might be helpful to provide a link to your site or use something like pastebin.com

  3. WPLaura
    Member
    Posted 7 months ago #

    Hiya

    Thanks for the response.

    My website is here:
    http://synergyinteriors.co.uk

    Thanks.

  4. salsaturation
    Member
    Posted 7 months ago #

    Hi Laura

    You can do something like this

    li:hover:after {
        content: " ";
    clear: left;
    display: block;
    position: absolute;
    height: 3px;
    width: 800px;
    }
    
    li.menu-item-29:hover:after {
    background-color: #00AEA1;
    margin-left: 0;
    }
    
    li.menu-item-30:hover:after {
    background-color: #5A70B2;
    margin-left: -127px;
    }
    
    li.menu-item-31:hover:after {
    background-color: #D86637;
    margin-left: -265px;
    }
    
    li.menu-item-32:hover:after {
    background-color: #B2488E;
    margin-left: -413px;
    }
    
    li.menu-item-33-cy:hover:after {
    background-color: Red;
    margin-left: -554px;
    }
  5. WPLaura
    Member
    Posted 7 months ago #

    That works perfectly - thank you so much.

    I had a hunch that I could do something with the 'after' selector, but I was struggling to get it to work.

    Thank you!

  6. salsaturation
    Member
    Posted 7 months ago #

    you're welcome

Reply

You must log in to post.

About this Topic

Tags