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

How to set mouseover display delay

本文关键字：鼠标 悬停 显示 延迟 设置 何设置      更新时间：2023-09-26

我在表格列表上使用鼠标悬停效果来显示悬停时的课程内容。然而，正如表中所示，当从一行到另一行时，它"变化太快"，这就是为什么我想在鼠标悬停效果上添加一些延迟。

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

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

如何进行小延迟？

一个非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后运行它们。

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

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

如果您使用jQuery的显示和隐藏方法，您可以简单地将所需的持续时间（毫秒）放在括号之间：

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