jquery mouseover/mouseout答案

【问题标题】：jquery mouseover/mouseoutjquery 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>

【问题讨论】：

标签： jquery jquery-ui jquery-plugins jquery-selectors jquery-validate

【解决方案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 被隐藏了。

【讨论】：