Question

我目前正在尝试创建鼠标悬停效果，该效果将显示描述并在几秒钟内可见，允许用户在href链接的描述上使用鼠标，而不是在移动鼠标时消失。感谢

¹

＆＃13;

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

＆＃13;

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;

}

＆＃13;

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>

＆＃13;

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';
}

现在，1000毫秒是鼠标输出后显示文本的延迟。

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

说明框可见延迟

2 个答案: