[英]Hover out delay for unintended action
当用户无意识地将鼠标悬停在菜单上然后再次悬停时,我试图从slideUp操作中延迟或停止菜单。 当用户无意中将鼠标悬停在悬停区域时,我试图防止菜单向上滑动。 我希望用户将鼠标悬停在瞬间,而不希望菜单向上滑动。
我在下面使用了延迟功能,因为这不会阻止菜单向上滑动。 谢谢。
$(document).ready(function() {
$('#nav li').hover(
function () {
//show its submenu
$('ul', this).slideDown(250);
},
function () {
//hide its submenu
$('ul', this).delay(1000).slideUp(500);
}
);
});
演示: http : //jsfiddle.net/D3A5g/
这是尼尔森发表的建议。 它可以在jsfiddle上工作,但不能在我的页面上工作。 谁能告诉我是什么阻止了我的页面工作?
工作演示: http : //jsfiddle.net/xwAdG/6/
下面的代码在我测试时不起作用。 任何想法为什么它不起作用?
<html>
<head>
<style type="text/css">
#nav {
padding: 40px;
border: solid #999 1px;
}
#nav ul {
margin: 0;
padding: 0;
display: none;
background-color: #CCC;
}
#nav ul li {
margin: 0;
list-style: none;
list-style-type: none;
padding: 5px;
width: 40px;
}
#nav a {
color: black;
text-decoration: none;
padding: 5px;
}
#nav a:hover {
text-decoration: none;
background-color: yellow;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script>
<script>
var config = {
over: function () { //onMouseOver callback (REQUIRED)
$('ul', this).slideDown(250);//show its submenu
},
timeout: 500, // milliseconds delay before onMouseOut (default 0)
out: function () { // function = onMouseOut callback (REQUIRED)
$('ul', this).slideUp(500); //hide its submenu
}
};
$('#nav li').hoverIntent(config);
</script>
</head>
<body>
<ul id="nav">
<li ><a href="#">Main</a>
<ul>
<li><a href="#">AAAAA</a></li>
<li><a href="#">BBBBB</a></li>
<li><a href="#">CCCCC</a></li>
<li><a href="#">DDDDD</a></li>
<li><a href="#">FFFFF</a></li>
</ul>
</li>
</ul>
</body>
</html>
更新 :我发现我需要用$(document).ready包装代码。 通过这样做,它可以在html页面中工作。
<script>
$(document).ready(function() {
var config = {
over: function () { //onMouseOver callback (REQUIRED)
$('ul', this).slideDown(250);//show its submenu
},
timeout: 500, // milliseconds delay before onMouseOut (default 0)
out: function () { // function = onMouseOut callback (REQUIRED)
$('ul', this).slideUp(500); //hide its submenu
}
};
$('#nav li').hoverIntent(config);
});
</script>
我为此建议您使用hoverIntent插件 , 到目前为止 ,我已经在一些项目中使用了它,并且非常高兴。
您发布的代码将与以下插件一起使用:
var config = {
over: function () { //onMouseOver callback (REQUIRED)
$('ul', '#nav li').slideDown(250);//show its submenu
},
timeout: 0, // milliseconds delay before onMouseOut (default 0)
out: function () { // function = onMouseOut callback (REQUIRED)
$('ul', '#nav li').slideUp(500); //hide its submenu
}
};
$('#nav li').hoverIntent(config);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.