在悬停时显示隐藏文字（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

如果要使用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>

jsfiddle link for convenience

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';
};