jquery mouseover/mouseout
Posted
技术标签:
【中文标题】jquery mouseover/mouseout【英文标题】： 【发布时间】：2011-03-03 22:08:39 【问题描述】：在下面的代码中，一旦鼠标移出，鼠标再次悬停就不起作用了，解决方法是什么
<!DOCTYPE html>
<html>
<head>
<style>
/* div background:#def3ca; margin:3px; width:80px;
display:none; float:left; text-align:center; */
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="playControls" style="position:absolute; bottom:0px; left:0px; right:0px;color:blue;">
Mouse over me
</div>
<script>
$(document).ready(function()
$("#playControls").mouseover(function ()
alert('here');
$("div:eq(0)").show("fast", function ()
/* use callee so don't have to name the function */
$(this).next("div").show("fast", arguments.callee);
);
);
$("#playControls").mouseout(function ()
alert('here');
$("div").hide(2000);
);
);
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：这一行隐藏了页面上的所有 div：
$("div").hide(2000);
我认为这不是你想要的。它还将隐藏处理鼠标悬停/鼠标悬停的 div。
我想你的意思是：
$(this).next("div").hide(2000);
这将只隐藏你想要的 div。
【讨论】：
不，我不想要这个，但我应该能够找回 div，怎么做 目前还不是很清楚预期的行为是什么。你能解释一下你想在 mouseover/mouseout 上发生什么吗？ 鼠标悬停在 div 上，div 应该可见，否则隐藏 div @Hulk 如果它是隐藏的，你怎么能将鼠标悬停在某个东西上？ o.O【参考方案2】：使用hover 函数。它是专门为这种使用模式而设计的。
【讨论】：
【参考方案3】：$("#playControls").mouseout(function ()
alert('here');
$("div").hide(2000);
);
在这部分代码中，当鼠标移出 div#playControls 时，将隐藏所有 div。无法触发 div 的 mouseover 事件的原因是 div 被隐藏了。
【讨论】：
以上是关于jquery mouseover/mouseout的主要内容，如果未能解决你的问题，请参考以下文章
如何：在 mouseOver/mouseOut - JQuery .hover 上添加/删除类？
jQuery 问题 - mouseover/mouseout 太快
jQuery 悬停 mouseover/mouseout 计时