html - 悬停时显示隐藏文本 (CSS)

Question

我已经尝试了一段时间来在 :hover 上显示一些文字, 谁能帮我解释一下？

我试过:

#DivForHoverItem:hover #HiddenText {
     display: block;}

不幸的是，运气不好。我发现的每个示例中都有这个小片段。

我也没看懂:https://css-tricks.com/forums/topic/show-text-on-hover-with-css/

我尝试获取 <div id="DivForHoverItem"><p>Shown text</p></div>

<div id="HiddenText"><p>Hidden text</p></div>

CSS:

#HiddenText {
   display: none;
}

代码排在那里^

#DivForHoverItem:hover #HiddenText {
     display: block;}

Answer 1

#HiddenText 元素必须位于#DivForHoverItem 元素内，如果您想使用 CSS 实现此目的。尝试这样的事情:

#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>

jsfiddle link for convenience