jquery: menu show at mouseover

Question

$(document).ready(function () {
    $('img.menu_class').click(function () {
    $('ul.the_menu').slideToggle('medium');
    });
    $('.img.menu_class').mouseover(function() {
    $('ul.the_menu').slideToggle('medium');
    });
});

I've added this mouseover, but it doesnt work, only if i click.. What have i done wrong?

Answer 1

You should use mouseenter and mouseleave insted of mouseover because mouseover is triggered every time the pointer moves into the child element and mouseenter only when the pointer moves into the bound element.

$('img.menu_class').bind("mouseenter", function () {
    $('ul.the_menu').slideToggle('medium');
});
$('ul.the_menu').bind("mouseleave", function () {
    $('ul.the_menu').slideToggle('medium');
});