JQuery hover function causes my div to hide

Question

In my functions.js I have:

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

Html file:

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

Why, when I hover over sub1, sub1 and sub2 hide? If it's simple text, it's ok. I hope you got my question.

Edit: By the way. Is there any way to make something like die(); or exit(); from php in javascript to stop execution?

Answer 1

$.hover() takes two arguments. If you just want to use the first, use $.mouseover() instead.

$(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 is the wrong event - it is triggered when you hover over a child element.
Use mouseleave instead:

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

See it here: http://jsbin.com/irexo
Documentation here: http://docs.jquery.com/Events/mouseout