Question

我有一个隐藏的div，我希望只有当用户的鼠标悬停在另一个触发元素上几秒钟时才显示隐藏的div，而不是在用户悬停触发元素时显示隐藏的div

这是我的javascript代码

$('.c_like_icon').mouseover(


function() {
        var timeout = setTimeout(function(){
            var comment_id=$(this).attr('data-commentId');

    $.ajax({
    url: 'ajax_c_like_user.php',
    method:'post',
    data:{comment_id:comment_id},
    success:function(data){

    var like_num=$('#'+comment_id+'c_like_number').text();
    if(like_num>=1){
        $('#'+comment_id+'like_user_w').html(data);
        $('#'+comment_id+'like_user_w').show();
    }
    else{
            $('#'+comment_id+'like_user_w').hide();


    }   
    }
       })     
        }, 2000); //2 seconds
    },
    function(){
        var comment_id=$(this).attr('data-commentId');
        clearTimeout(timeout); //cancel the timeout if they hover off
            $('#'+comment_id+'like_user_w').hide();
        // do stuff when hover off
    }
    )

Answer 1

在悬停功能中定义超时并在悬停功能中清除，以防止它在时间用完之前离开，如下所示：

var timeout;
$('#trigger').hover(
    function() {
        timeout = setTimeout(function(){
            // do stuff on hover
            $('#hiddenDiv').show();
        }, 2000); //2 seconds
    },
    function(){
        clearTimeout(timeout); //cancel the timeout if they hover off
        // do stuff when hover off
        $('#hiddenDiv').hide();
    }
);

Answer 2

您可以非常轻松地执行此操作仅限CSS 。不需要jquery，因为它是一个可供下载的大型库，因此具有巨大的优势。只需使用延迟转换。以下是我的示例（现场演示：http://codepen.io/anon/pen/jbGhi）：

<强> HTML

<div id="first"></div>
<div id="second"></div>

在这个例子中，id不是必需的，但我发现更好地理解会发生什么。

<强> CSS

为了这个例子的目的，我将对div进行样式化（使悬停效果更加明显），但以下都不重要：

div{
    height: 50vmin;
    width: 50vmin;
    border: solid 5px black;
    float: left;
    margin-right: 10vmin;
}

这就是魔术发生的地方：

div#first:hover ~ div#second{
    transition: all 0.2s ease 1s;
    background-color: green;
}

我们正在使用css选择器“〜”，这意味着“（和他们的孩子）之后的任何兄弟元素”。在那个例子中，它意味着“一个名为#second的div，它是兄弟姐妹，后面是一个名为#first的div，它被徘徊”。基本上，只要第二个div是兄弟姐妹，并且在第一个div之后或包含在第一个div之间（即之后），您将获得所需的效果。

你去吧。您可以在更改发生之前添加更多延迟（将“1”更改为任何持续时间），并且您可以平滑过渡本身（将“0.2s”更改为任何持续时间）。

PS：在CSS中，不要忘记为转换和转换添加所有供应商前缀。请务必查看caniuse.com以了解所需的前缀。例如：

-webkit-transition: all 1s;
transition: all 1s;

Answer 3

我知道这是一个老问题，但我认为它应该有一个很好的解决方案

// Element it will be the the triggerer
let timeOut;

element.addEventListener('mouseover', (e) => {
  timeOut = setTimeout(() => {
    // Do your stuff here
  }, 400);
});


element.addEventListener('mouseout', (e) => {
  clearTimeout(timeOut);
});

仅当用户将元素悬停几秒钟时才显示div

3 个答案: