Question

在下面的代码中，一旦完成鼠标操作，鼠标再次无效，这是什么工作

 <!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>

Answer 1

此行隐藏了您网页上的所有div：

$("div").hide(2000);

我认为这不是你想要的。它还会隐藏处理鼠标悬停/鼠标移除的div。

我认为你的意思是：

$(this).next("div").hide(2000);

这将只隐藏你想要的div。

Answer 2

使用hover功能。它专门针对这种使用模式而制作。

Answer 3

$("#playControls").mouseout(function () {
  alert('here');
  $("div").hide(2000);
});

在代码的这一部分中，当您使用div＃playControls鼠标输出时隐藏所有div。您无法触发div的mouseover事件的原因是div被隐藏。

jquery mouseover / mouseout

3 个答案: