Question

我在表格列表中使用鼠标悬停效果来显示悬停课程的内容。但是，正如它在表格中所说的那样，当从一行转到另一行时，它的变化太快了，这就是为什么我想对鼠标悬停效果施加一些延迟。

我的代码目前看起来像这样：

onmouseover="show('id')" onmouseout="hide('id')">

如何延迟一小段时间？

Answer 1

非jQuery解决方案，供参考：

<script>

    var show=function(x)
    {
        setTimeout(
            function()
            {
                do the stuff...
            },
            200
        );
    };

    var hide=function(x)
    {
        setTimeout(
            function()
            {
                do the other stuff...
            },
            200
        );
    };

</script>
<div onmouseover="show('id')"  onmouseout="show('id')"></div>

基本上，我已将show和hide定义为创建匿名函数的函数，这些函数执行实际显示和隐藏，然后使用setTimeout在200ms延迟后运行它们。

Answer 2

如果你使用jquery来控制你的悬停动作和计时器，那么大脑就是一个很棒的插件。 http://cherne.net/brian/resources/jquery.hoverIntent.html

或者您可以使用vannilla javascript来设置计时器。

Answer 3

如果你正在使用jQuery的show和hide方法，你可以简单地在括号内输入所需的持续时间：

<div onmouseover="$('#id').show(600)" onmouseout="$('#id').hide(600)">
    some content
</div>

如何设置鼠标悬停显示延迟

3 个答案: