鼠标悬停时显示隐藏的文本（CSS）

Question

我很久以前就尝试在:hover时显示一些文本，有人能够为我解释一下吗？

我尝试过：

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

很遗憾，我找到的所有示例中都有这个小片段。

我也没有理解：https://css-tricks.com/forums/topic/show-text-on-hover-with-css/ 我尝试获取 <div id="DivForHoverItem"><p>显示的文本</p></div>

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

CSS（层叠样式表）：

#HiddenText {
   display: none;
}

而上面那行代码 ^

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

- Albert MN.

---

请发布您的HTML和所有相关的CSS。 - Keammoort

请发布您的HTML代码，仅CSS无法显示问题所在。 - Marc Audet

完全没有问题，只是我似乎无法弄清楚如何做到这一点。我的代码中没有任何交互，因为我的代码只是一个简单的测试，只有那个小小的部分。 - Albert MN.

好的，请展示一下你尝试实现这个功能的代码，我们可以帮助你找出问题所在。如果我们看不到你的代码，我们就无法帮你找出它不能正常工作的原因。 - Hayden Schiff

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链接

- Hayden Schiff

---

谢谢，很好的示范，现在我真正理解了 :) - Albert MN.

他所要做的就是将 #DivForHoverItem:hover #HiddenText 改为 #DivForHoverItem:hover + #HiddenText，请参阅 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Adjacent_sibling_selectors。 - AR_HZ

他的整个DOM布局并不清楚；我不知道它们是否确实是连续的元素。但这说得对，这绝对是一种不错的实现方式。 - Hayden Schiff

我似乎无法将Transition: all 1s;添加到这个元素中...有什么线索吗？ - Albert MN.

@iversen display是一个无法进行动画处理的属性。如果您想要实现淡入效果，应该将元素的不透明度从0.0变为1.0。 - Hayden Schiff

Answer 2

如果您可以使用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';
};

- Ryan Rossiter