Question

在我的functions.js中我有：

$(document).ready(function() {      
  $("#cat").hover(function() {
    $("#kiti").show();  
  })
  $("#kiti").mouseout(function() {
    $("#kiti").hide();      
  })                                 
})

Html文件：

<a id="cat" href="#">category</a>
<div id="kiti">
    <a href="#">sub1</a>
    <br /><a href="#">sub2</a>
</div>

为什么，当我将鼠标悬停在sub1上时，sub1和sub2会隐藏？如果它是简单的文字，那没关系。我希望你能得到我的问题。

编辑：顺便说一下。有没有办法在javascript中从php中创建像die();或exit();这样的东西来停止执行？

Answer 1

$.hover()有两个参数。如果您只想使用第一个，请改用$.mouseover()。

$(function(){
  $("a#cat").mouseover(function(){
    $("#kiti").show(); // shows <div id="kiti">...sub1...sub2...</div>
  });
  $("#kiti").mouseleave(function(){
    $(this).hide();    // hides <div id="kiti">...sub1...sub2...</div>
  });
});

Answer 2

mouseout是错误的事件 - 当您将悬停在子元素上时会触发该事件。
请改用mouseleave：

$("#cat").mouseenter(function() {
    $("#kiti").show();  
});
$("#kiti").mouseleave(function() {
    $("#kiti").hide();      
});

请在此处查看：http://jsbin.com/irexo
这里的文档：http://docs.jquery.com/Events/mouseout

JQuery悬停功能导致我的div隐藏

2 个答案: