jQuery - 关于悬停让div可见
对于问题标题,我真的不知道如何总结它的简短描述。jQuery - 关于悬停让div可见
基本上我有一个<ul>
它有我的导航链接。但是,其中一个<li>
链接是我的自定义下拉菜单购物篮,可以让用户预览其项目。
现在,当我将鼠标悬停在元素上时,我希望它将该篮子从display:none
更改为display:block
,使其可见。但随着我的代码,只要我离开悬停元素点击一个项目。下拉菜单消失了,因为我不再徘徊在我在jQuery hover函数中定义的元素上。
例如(快速虚设码)
$('.hover-on-me').hover(function(){
$('.hover-open').show();
},function(){
//This right here hides the dropdown
$('.hover-open').hide();
});
现在我不使用Javascript/jQuery的赌注。我试图在函数中说,如果鼠标仍然在导航栏上,不要隐藏它,或者如果鼠标在购物篮上,那么不要隐藏它。我认为这会让我从悬停元素移出,经过导航栏并进入下拉菜单,但不起作用。因为当我离开该区域时,元素保持打开并且不会关闭。
Here is a simple jsfiddle显示我的问题。
谢谢!
我认为你的班级名字只有一个错误。
jQuery代码: -
$('.hover-on-me').hover(function(){
$(this).parent("li").addClass("active");
}, function(){
$(this).parent("li").removeClass("active");
});
一下添加到您的CSS代码: -
ul li.active{display:inline-block;}
ul li.active .hover-open, ul li .hover-open:hover{display:block;}
能否请您尝试这些。
对不起,我把错误的代码。我已经编辑我的问题,正确的链接了。你会看到,然后当你试图徘徊.hover - 打开它关闭 – virepo
@virepo你可以请尝试我的答案? –
如果您有任何问题,我会向您解释。 –
悬停语法看起来是这样.. $(选择).hover(inFunction,outFunction) 并试图修改这样的脚本..
$('.hover-on-me').hover(
function(){
$('.hover-open').show();
},
function(){
if(!$('ul').is(":hover") || !$('.hover-open').is(":hover")){
$('.hover-open').hide();
}
}
);
OR 用鼠标事件函数..
$(".hover-on-me")
.mouseenter(function() {
$('.hover-open').show();
});
$(".hover-open")
.mouseleave(function() {
$('.hover-open').hide();
});
进一步详情,请参阅这里.. https://api.jquery.com/hover/#hover2和https://api.jquery.com/category/events/mouse-events/
使用toggle()而不是显示/隐藏 – eronax59
为什么使用切换? – virepo
[非JavaScript的方式来做到这一点](https://jsfiddle.net/on9wtk2b/11/) –