Jquery hover and hide another div

Question

I'm using superfish menu and I have a problem.

In the header, I have a logo holder div with the logo badge div and logo name div inside. When the user hovers over a top level link the sf-mega drop menu is show and a class of .sfHover is applied to the parent li.

My issue is that I need the logo badge to show on top of the drop down menu BUT not the logo name div.

Using z-indexes are out I think so (I have tried) so I wanted to hide the logo name div when the .sfHover class is active on the menu li so I have this code but it is not hiding it.

if ($('#mainMenu.sf-menu ul li').hover().hasClass('sfHover') == true) {
    $('.logoHolder .kingsworthName').hide();
}

Any help is appreciated.

Answer 1

Your usage of hover() is wrong here. It expects handler functions as argument. You should use it like this :

$('#mainMenu.sf-menu ul li').hover(
   function() {  // when the mouse pointer enters the element.
     if ($(this).hasClass('sfHover')) {
         $('.logoHolder .kingsworthName').hide();
       }
     },
   function () {} // when the mouse pointer leaves the element.
);