jquery mouseover/mouseout_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-04 00:31 出处：网络

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>

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.

Use the hover function. Its made specially for this usage pattern.

$("#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.