描述框延迟可见

Question

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

¹

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<a href="#" onmouseover="showbox('description') " onmouseout="hidebox('description')" onclick="return false;"> <sup>1</sup></a><span id="description" class="descriptionDisplay">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).</span>

Answer 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 是 mouseout 后文本显示的延迟。

Answer 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')"

描述框延迟可见

Description Box visible with delay

javascript

tooltip

onmouseover

onmouseout