jquery - 当鼠标按住它时如何显示元素

Question

我有一个 ul 和许多 li 。我希望当鼠标在任何 li 中按住 3 秒时向我显示一个 div，当我将鼠标离开该 div 隐藏的元素时。我在谷歌中进行了多次搜索，我知道我应该使用 fadeIn 和 fadeOut 但我不知道如何使用它们。我还想在单击任何 li 时向我显示一个警报。请指导我，因为我很困惑。

非常感谢

这是我的代码:HTML:

<ul id="friend-list">
        <li id="1"></li>
        <li id="2"></li>
        <li id="3"></li>
        <li id="4"></li>
        <li id="5"></li>
        <li id="6"></li>
</ul>

jQuery:

$(document).on('mouseover','#friend-list li',function(){
    $('#center-side').fadeIn('slow');
});
$(document).on('mouseout','#friend-list li',function(){
    $('#center-side').stop().fadeOut('slow');
});

$(document).on('click','#friend-list li',function(){
    alert('aaaaaaaaa');
}); 

Answer 1

您可以使用setTimeout()

jQuery

var tOut;

$('ul').on('mouseover', 'li', function () {
    tOut = setTimeout(function () {
        $('div').show();
    }, 3000);
}).on('mouseout', 'li', function () {
    clearTimeout(tOut);
    $('div').hide();
}).on('click','li',function(){
    alert("aaaaaaaaa");
});

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>1</li>
    <li>2</li>
</ul>
<div>show and hide me</div>

DEMO