描述框延迟可见答案

【问题标题】：Description Box visible with delay描述框延迟可见
【发布时间】：2017-11-02 17:08:58
【问题描述】：

我目前正在尝试创建一个鼠标悬停效果，该效果将显示描述并显示几秒钟，允许用户在描述上使用鼠标以获得 href 链接，并且当您将鼠标移开时不会消失.谢谢

function showbox(nodeId){
    document.getElementById(nodeId).style.display = 'block';
setTimeout(showbox,1000);
}

function hidebox(nodeId)
{
    document.getElementById(nodeId).style.display = 'none';
    
}

span.descriptionDisplay {
  display:none;
    padding: 20px;
    margin: 15px 0 0 0;
    width: 780px;
    z-index: 999;
    position: fixed;
    background-color: #f2f2eb;
    color: #222;
    font-size: 19px;
    line-height: 24px;
    -webkit-box-shadow: 0px 0px 10px 10px rgba(7, 7, 7, 0.3);
    box-shadow: 0px 0px 10px 10px rgba(7, 7, 7, 0.3);
    -webkit-border-radius: 12px;
    border-radius: 12px;

}

Help your my only hope&lt;a href="#" onmouseover="showbox('description') " onmouseout="hidebox('description')" onclick="return false;"&gt; &lt;sup&gt;1&lt;/sup&gt;&lt;/a&gt;&lt;span id="description" class="descriptionDisplay"&gt;See Jean E. Howard, The Stage and Social Struggle in Early Modern England (London: Routledge, 1994); Christopher Warley, Sonnet Sequences and Social Distinction in Renaissance England (Cambridge: Cambridge University Press, 2005); Christopher Warley, Reading Class Through Shakespeare, Donne, and Milton (Cambridge: Cambridge University Press, 2014).&lt;/span&gt;

【问题讨论】：

标签： javascript tooltip onmouseover onmouseout

【解决方案1】：

也许你应该在 hidebox 函数中使用 setTimeout 而不是 showbox？像这样：

function hidebox(nodeId){
    setTimeout(() => {
        document.getElementById(nodeId).style.display = 'none';
    }, 1000)
}

function showbox(nodeId){
    document.getElementById(nodeId).style.display = 'block';
}

现在，1000ms 是鼠标移出后文本显示的延迟。

【讨论】：

【解决方案2】：

检查下面的代码，这是一个如何让它工作的示例。但我认为您应该根据实际需要更新此实现。

这里的要点：

在显示工具提示之前，我们会检查它是否尚未显示 (isHidden(nodeId))；
显示已移至单独的函数 showbox 以便在一段时间后调用它
您应该保存设置超时showBoxDelayTimeout 的结果，以便能够在需要时停止该计时器 (onMouseOut)
当工具提示已经显示 showBox 时，设置了一个不同的计时器以在一段时间后将其隐藏 (hideBox)

代码

var showBoxDelayTimeout = 0;

function onMouseIn(nodeId) {
    if(isHidden(nodeId)) {
        showBoxDelayTimeout = setTimeout(showbox.bind(nodeId), 1000);
    } 
}

function onMouseOut(nodeId) {
    clearTimeout(showBoxDelayTimeout); 
}

function showBox(nodeId) {
    document.getElementById(nodeId).style.display = 'block';
    setTimeout(hideBox.bind(nodeId), 2000); 
}

function hideBox(nodeId) {
    document.getElementById(nodeId).style.display = 'none'; 
}

function isHidden(nodeId) {
    document.getElementById(nodeId).style.display === 'none'; 
}

在你的 DOM 中

<a href="#" onmouseover="onMouseIn('description') " onmouseout="onMouseOut('description')"

【讨论】：