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

Answer 2

你可以用这个：

                        var timer = null;
                        $('#friend-list li').hover(function() {
                            var $el = $('#center-side');
                            clearTimeout(timer);
                            timer = setTimeout(function() {
                                $el.css('display','block');
                            }, 1500);
                        }, function() {
                            clearTimeout(timer);
                            timer = setTimeout(function() {
                                $('#center-side').css('display','none');
                            }, 10);

                        });

Answer 3

$("li.foo").mouseover(function()
{
    $("div.foo").show(100);
}.mouseout(function()
{
    $("div.foo").hide(100);
}.click(function()
{
    alert("Clicked");
});

Answer 4

jQuery - ＆gt;鼠标按下

$(".element").mousedown(function(){
  alert("Success");
});

当用户点击元素时，这将运行您的代码。 Mouseup - ＆gt;当离开点击时。

http://api.jquery.com/mousedown/

$(".element").mouseenter(function(){
  alert("Enter");
}).mouseleave(function(){
  alert("Leave");
});

如果光标在对象周围飞行而不是单击，那么这将运行您的代码。

http://api.jquery.com/mouseenter/

http://api.jquery.com/mouseleave/

当鼠标抓住它时如何显示元素

4 个答案: