>我目前正在尝试使我的描述框在鼠标悬停在描述框上时可见,当鼠标不在描述框中时消失。
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>
不需要
JS。你可以用纯CSS来做到这一点。
我更改的关键元素是在所有内容周围创建一个容器元素,并将容器上的边距顶部更改为填充顶部以进行描述。
您的示例失败的原因是悬停和说明之间有一个边距空间,这意味着它实际上并不在元素上方,因此无法显示说明。
.container:hover .description {
display: block;
}
.description-container {
padding-top: 15px;
}
在这里演示https://jsfiddle.net/joshmoxey/fsnt0t6v/