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

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中制作类似die();或exit();来自php的东西来停止执行？

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>
  });
});