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做到这一点。

我更改的关键元素是围绕所有内容创建容器元素，并将容器顶部更改为容器上的填充顶部以供描述。

你的例子失败的原因是因为在悬停和描述之间存在一个边距空间，这意味着它实际上并没有超出元素，所以它无法显示描述。

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

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

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

鼠标悬停在描述

1 个答案: