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.
2 answers
solution1
3 2015-12-07 10:55:40
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.
);
solution2
0 ACCPTED 2015-12-07 11:32:16
You can use pure css. here's the link.
//css FILE
.box {
height: 300px;
width: 300px;
background: red;
}
.hidden {
height: 100px;
width: 100px;
background: white;
display:none;
}
.box:hover .hidden {
display: block;
}
//HTML
<html>
<body>
<div class="box">
<div class="hidden">
Hello there
</div>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.