Html 在悬停时显示隐藏文本 (CSS)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31549280/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show hidden text on hover (CSS)
提问by Albert MN.
I have tried for a while now to show some text on :hover, is anyone able to explain it for me?
我已经尝试了一段时间在 上显示一些文字:hover，有人可以为我解释一下吗？
I tried:
我试过：
#DivForHoverItem:hover #HiddenText {
display: block;}
without luck, sadly. This little piece is in every example I found.
没有运气，可悲。我发现的每个例子中都有这个小部分。
I also failed to understand: https://css-tricks.com/forums/topic/show-text-on-hover-with-css/
我也看不懂：https: //css-tricks.com/forums/topic/show-text-on-hover-with-css/
I try to get <div id="DivForHoverItem"><p>Shown text</p></div>
我试着得到 <div id="DivForHoverItem"><p>Shown text</p></div>
<div id="HiddenText"><p>Hidden text</p></div>
CSS:
CSS：
#HiddenText {
display: none;
}
and the code line up there ^
代码排在那里^
#DivForHoverItem:hover #HiddenText {
display: block;}
回答by Hayden Schiff
The #HiddenText element has to be inside the #DivForHoverItem element if you want to achieve this with CSS. Try something like this:
如果您想使用 CSS 实现这一点，#HiddenText 元素必须位于 #DivForHoverItem 元素内。尝试这样的事情：
#DivForHoverItem {
/*just so we can see it*/
height: 50px;
width: 300px;
background-color: red;
}
#HiddenText {
display: none;
}
#DivForHoverItem:hover #HiddenText {
display:block;
}<div id="DivForHoverItem">
<div id="HiddenText"><p>Hidden text</p></div>
</div>回答by Ryan Rossiter
If you're okay with using JavaScript you could use:
如果您可以使用 JavaScript，则可以使用：
var outDiv = document.getElementById('DivForHoverItem');
var inDiv = document.getElementById('HiddenText');
outDiv.onmouseover = function() {
inDiv.style.display = 'inline';
};
outDiv.onmouseout = function() {
inDiv.style.display = 'none';
};
