我该如何做jquery悬停效果？

Question

i already made the usual buttons but i need to make the search button on the left menu on this website http://www.coolwebmasters.com/

when i hover on the #profilename it disappears

<div id="container">
<div class="prof"><a href="index.php"><img src="imgs/profile.png" alt="Messages"/>

</a></div>
</div>
<div  id="profilename">Name</div>



$(".prof").hover(function(){
$('#profilename').show('slide', {direction: 'left'}, 280); 
}, function() {
    $('#profilename').hide('slide', {direction: 'left'}, 280); 
});

Answer 1

It is because when you move the mouse out of the .prof element, the #profilename is hidden.

Try

jQuery(function ($) {
    $('.prof').hover(function () {
        var $target = $('#profilename');
        clearTimeout($target.data('hoverTimer'));
        $target.stop(true, true).show('slide', {direction: 'left'}, 280);
    }, function () {
        var $target = $('#profilename');
        var timer = setTimeout(function () {
            $target.stop(true, true).hide('slide', {direction: 'left'}, 280);
        }, 200);
        $target.data('hoverTimer', timer);
    });

    $('#profilename').hover(function () {
        clearTimeout($(this).data('hoverTimer'));
    }, function () {
        $(this).stop(true, true).hide('slide', {direction: 'left'}, 280);
    });
});

Demo: Fiddle

In the above solution, we give a 200ms time for the user to move from .prof to #profilename element, if so we clears the timeout thus the hiding of the element is prevented.