Question

我已经制作了常用的按钮，但我需要在本网站的左侧菜单上设置搜索按钮 http://www.coolwebmasters.com/

当我将鼠标悬停在#profilename上时，它会消失

<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

这是因为当您将鼠标移出.prof元素时，隐藏了#profilename。

尝试

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

演示：Fiddle

在上面的解决方案中，我们为用户提供了200ms的时间从.prof移动到#profilename元素，如果是这样，我们会清除超时，从而防止隐藏元素。

我怎么能做这个jquery悬停效果？

1 个答案: