How to Change Style of Parent
  • on Hover

  • Tags: jquery,css,wordpress-theming

    Problem :

    I have a WordPress site (on my localhost) that uses a <ul> for a custom menu. How can I change the CSS of a <li> on hover only if it has a <ul> sub-menu?

    All the main menu items have a border-radius and I want to remove this on the current item (Services, below) for example:

        <div class="main-nav">
          <ul class="menu" id="menu-main-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a>
              <ul class="sub-menu">
                <li><a href="#">Item One</a></li>
                <li><a href="#>Item Two</a></li>
              </ul>
            </li>
            <li><a href="#>Contact</a></li>
          </ul>
        </div>
    

    I can't find a CSS solution and I've tried jQuery too:

        $('ul.sub-menu').parent().hover(function(){
        $(this).addClass('no-radius');
    }); 
    


    Solution :

    $('.menu li').has('ul').hover(function() {
        $(this).addClass('hover');
    }, function() {
        $(this).removeClass('hover');
    });
    

      CSS Howto..

      How to do grid of div elements?

      How to remove the “Facebook social plugin” text?

      How to display a div next to another div with no width defined?

      How to get row of floated images inside a div element to resize with browser window

      How can i get height form window top to my click point(a tag) on window using css or jquery or php?

      How do I display an image over a table cell that's larger than the cell?

      Bootstrap table how hidden, when toggled visible using javascript it does not show correctly

      How to center part of a navbar

      How can I convert a CSS stylesheet to inlined CSS styles? [closed]

      How to animate this function?

      How to download Jquery if link only shows source code and connect it to my html

      How can I get my menu/logo to be centered instead of all the way to the right?

      zindex + jquery: How to make my menu appear over the jquery script?

      How to add table highlighting in PHP?

      How to set overlay on a page according to page height using CSS

      How to create straight line with same css gradient at both ends?

      how to add equal empty spaces between images

      How to create icons like font awesome

      Parallax image shows at top of page on load

      How to fill larger image into smaller div?

      How to add text with css without pseudo-element

      How to set background image for body tag using css?

      how to read the following css class

      when a div is showing do some thing for me and when its hidden stop that , with jquery its possible?

      how to create inline style with :before and :after

      How To Turn JS Objects To HTML And Style With CSS

      How do I make a line feed in a div tag?

      How to adjust the height of two objects floating next to each other according to the amount of content, using css

      How to make nav and right block fixed, also keep the whole container is in center?

      How to set border to 0 in this table