Javascript JQuery mouseenter()和mouseleave()
所以我有了这个演示导航,它在侧面有一个小按钮,当你悬停按钮时,它会将菜单滑入窗口。虽然我已经让悬停装置工作了,但现在当鼠标离开时,它仍然打开。如何解决这个问题?顺便说一句,我对jQuery还很陌生 以下是html:Javascript JQuery mouseenter()和mouseleave(),javascript,jquery,html,mouseenter,mouseleave,Javascript,Jquery,Html,Mouseenter,Mouseleave,所以我有了这个演示导航,它在侧面有一个小按钮,当你悬停按钮时,它会将菜单滑入窗口。虽然我已经让悬停装置工作了,但现在当鼠标离开时,它仍然打开。如何解决这个问题?顺便说一句,我对jQuery还很陌生 以下是html: <div id="demoNav"> <button class="open"></button> <ul> <li><a href="index.html">Home Pagin
<div id="demoNav">
<button class="open"></button>
<ul>
<li><a href="index.html">Home Pagina</a></li>
<li><a href="product.html">Product Pagina</a></li>
<li><a href="bestel.html">Bestel Pagina</a></li>
</ul>
</div>
如果您需要更多信息,请告诉我,我会提供更多代码。添加鼠标删除事件-
$('#demoNav').mouseleave(function(){
$("#demoNav").animate({marginLeft:'50px'}, 500)
});
使用jQuery:
$("#demoNav").hover(function(){
// do something when mouse hover
},function(){
//do some thing when mouseout
});
你没有告诉它再躲起来 也就是说,我想提出以下CSS替代方案:
#demoNav {
transition:margin-left 0.5s ease;
-webkit-transition:margin-left 0.5s ease;
}
#demoNav:hover {
margin-left:0;
}
您为
mouseenter
编码,但忘记为mouseleave事件编码
在jQuery中添加这些行
$("#demoNav").mouseleave(function(){
$("#demoNav").animate({'marginLeft':'50px'}, 500)
});
此处的工作示例:
但我建议使用更干净的悬停方法
syntax: $(selector).hover(handlerIn, handlerOut)
试试这个:
$("#demoNav").hover(
function () {
$(this).animate({
marginLeft: '0px'
}, 500)
},
function () {
$(this).animate({
marginLeft: '50px'
}, 500)
});
也许这个解决方案有效
$('#demoNav .open').on("mouseenter", function(){ $(this).parent().animate({marginLeft:'0px'}, 500); });
$('#demoNav').on("mouseleave", function(){ $(this).animate({marginLeft:'50px'}, 500); });
这将激活按钮悬停时的窗格,但当您离开div时,它将再次向左移动这不是悬停按钮,这是鼠标进入div布局,执行$(“#demoNav.open”).hover(函数(){//XXXXX代码切换});工作得很有魅力!谢谢
$('#demoNav .open').on("mouseenter", function(){ $(this).parent().animate({marginLeft:'0px'}, 500); });
$('#demoNav').on("mouseleave", function(){ $(this).animate({marginLeft:'50px'}, 500); });