jquery mouseout no works

Question

I have link for activate this little script when mouseover , the problem no hide when the mouse it´s out

The Script :

<script>

function show_subcats(id)
{

   jQuery(".cat_sub_menu_"+id).show(1000);

   jQuery(".cat_sub_menu_"+id).mouseout(function() {

   jQuery(".cat_sub_menu_"+id).hide(1000);

});

}
</script>

The Link Activate the function :

<div>
    <a href="#" onmouseover="show_subcats('1');">Menu 1</a>

<div class="cat_sub_menu_1" style="display:none;">
Content Sub Menu
</div>
</div>

When i go over the link show the div the problem it´s when i go out the link , no hide the div

I don´t know which it´s the problem

The best regards

Answer 1

Check this Demo

You need mouseout on link and use attached it to the <div>. That's where you went wrong.

function show_subcats(id) {

    jQuery(".cat_sub_menu_" + id).show(1000);
    jQuery('a').mouseout(function () {

        jQuery(".cat_sub_menu_" + id).hide(1000);

    });
}

---

The above solution, though it works, is not the correct way to define an event handler.

I would suggest this simple solution : Working Demo

If you have multiple <a> links, choose the above solution.

jQuery('a').mouseover(function () {
    show_subcats('1');
}).mouseout(function(){
    hide_subcats('1');
});

function show_subcats(id) {
    jQuery(".cat_sub_menu_" + id).show(1000);
}

function hide_subcats(id) {
    jQuery(".cat_sub_menu_" + id).hide(1000);
}


<a href="#" >Menu 1</a>