鼠标悬停在描述上时保持打开状态的描述框

Question

我目前正在尝试让我的描述框在鼠标悬停在描述框上时可见，并在鼠标不在描述框中时消失。

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

 span.descriptionDisplay {
      display:none;
        padding: 20px;
        margin: 15px 0 0 0;
        width: 780px;
        z-index: 999;
        position: absolute;
        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;
    
    }

<a href="#" onmouseover="showbox('description')" onmouseout="hidebox('description')" onclick="return false;"> <sup>Help me stay open on hover </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

不需要 JS。您可以使用纯 CSS.

我更改的关键元素是在所有内容周围创建一个容器元素，并将容器上的 margin-top 更改为 padding-top 以进行描述。

您的示例失败的原因是悬停和描述之间存在空白 space，这意味着它实际上并未在元素上方，因此无法显示描述。

.container:hover .description {
  display: block;
}

.description-container {
  padding-top: 15px;
}

此处演示 https://jsfiddle.net/joshmoxey/fsnt0t6v/

鼠标悬停在描述上时保持打开状态的描述框

DescriptionBox that stays open when mouse is over description

javascript

mouseover

jquery-hover