jquery 鼠标悬停/鼠标悬停

发布于 2024-09-05 17:08:59 字数 942 浏览 2 评论 0原文

在下面的代码中，一旦鼠标移出完成，鼠标再次悬停就不起作用，解决这个问题的方法是什么

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

原文

In the following code once the mouse out is done the mouse over again does not work ,what is the work around for this

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鲜肉鲜肉永远不皱 2024-09-12 17:08:59

这一行隐藏了页面上的所有 div：

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

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

我想你的意思是：

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

这只会隐藏你想要的 div。

This line hides all divs on your page:

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

I don't think this is what you want. It will also hide the div which handles the mouseover/mouseout.

I think you meant:

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

This will hide only the div you wanted.

回复收藏 0 原文

看海 2024-09-12 17:08:59

使用悬停函数。它是专门针对这种使用模式而设计的。

回复收藏 0 原文

峩卟喜欢 2024-09-12 17:08:59

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

在这部分代码中，当您将鼠标移出 div#playControls 时，您将隐藏所有 div。您无法触发 div 的 mouseover 事件的原因是因为 div 是隐藏的。

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

In this part of your code, you hide all divs when you mouseout of div#playControls. The reason you can't fire the mouseover event of your div is because the div is hidden.

回复收藏 0 原文

~没有更多了~