Question

嗨我有以下代码在这里我有div卡-208点击我不想显示divtoshow div但在鼠标悬停我想显示它会延迟但不点击

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
.card {
 border:1px solid transparent;
 cursor:pointer;
 float:left;
 height:50px;
 margin:10px;
 padding:3px;
 width:50px;
 background:#000;
 color:#fff;

}
.ui-corner-all {
 -moz-border-radius:4px 4px 4px 4px !important;
}
</style>
</head>
<body>
<!--  <div id="popupContact"  style="position:absolute;left:100px;top:100px;width:100px;height:50px;background-color:orange;border:1px solid red ;">
 </div> -->
<div class="card  ui-corner-all" id="card-208">   
 <div class="card-name">    Rahul1's Gib 1       </div>   
</div>
'<div id="divtoshow" style="display:block;background-color:green; border:1px solid black;width:200px;height:100px;position:absolute;">
  dsfdssd <a href="#">rahul</a>
 </div>

</body>
</html>
<script  type='text/javascript'>
$(document).ready(function(){
 var popup_pos=$('#card-208').offset();
 var timer;
 $("#card-208").bind('mouseover',{},function() {

      setTimeout(function() {
   $("#divtoshow").show();
  }, 1000);
  }); 
 $("#card-208").bind('click',{},function() {
  $("#card-208").unbind('mouseover');
      alert('click event is triggered');





  }); 

 $("#divtoshow").bind('mouseleave',{} ,function() { 
      $("#divtoshow").hide();
  });
});
</script>

Answer 1

这就是你想要的吗？

show_timeout = false;
$(".card")
  .mouseover(function() {
    show_timeout = window.setTimeout(function() {
      $("#divtoshow").show(500);
    }, 1000);
  })
  .click(function() {
    window.clearTimeout(show_timeout);
  });

Answer 2

我会在id =“card-208”上添加“onmouseover事件”和“onclick事件”

     <div class="card  ui-corner-all" id="card-208" onmouseover="displaydiv()"
     onclick="hidediv()"> </div>

     <script>
     function displaydiv()
     {
     $('#divtoshow').css('display','block');
     }

     function hidediv()
     {
     $('#divtoshow').css('display','none');
     }
     </script>

单击事件上的解除绑定鼠标悬停事件

2 个答案: