鼠标悬停时保持打开的描述框描述答案

【问题标题】：DescriptionBox that stays open when mouse is over description鼠标悬停时保持打开的描述框描述
【发布时间】：2017-11-06 19:52:46
【问题描述】：

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

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

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

【解决方案1】：

不需要 JS。你可以用纯 CSS 做到这一点。

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

您的示例失败的原因是悬停和描述之间有一个边距空间，这意味着它实际上不在元素上方，因此无法显示描述。

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

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

在这里演示 https://jsfiddle.net/joshmoxey/fsnt0t6v/

【讨论】：