悬停时显示隐藏文字（CSS） [英] Show hidden text on hover (CSS)

问题描述

我已经尝试了一段时间，在：hover 上显示一些文字，是否有人能够为我解释它？

我试过：

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

不幸的是，很遗憾。这个小小的部分是我找到的每一个例子。

我也不明白： https://css-tricks.com/forums/topic/show-text-on-hover-with-css/

我尝试获取< div id =DivForHoverItem>< p>显示文字< / p>< / div> / code>

 < div id =HiddenText>< p>隐藏文字< / p> < / DIV> 
  

CSS：



  #HiddenText {
 display：none; 
} 
  

以及那里的代码行^

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




解决方案

<＃>如果您想用CSS实现此目的，#HiddenText元素必须位于#DivForHoverItem元素内。尝试如下所示：

#DivForHoverItem {/ *只是让我们可以看到它* / height：50px;宽度：300px;如果你想要使用它，你可以使用下面的代码：background-color：red;}＃HiddenText {display：none;}＃divForHoverItem：hover #HiddenText {display：block;}

 < div id =DivForHoverItem> < div id =HiddenText>< p>隐藏文字< / p>< / div>< / div>  

jsfiddle链接为了方便

I have tried for a while now to show some text on :hover, is anyone able to explain it for me?

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/

I try to get <div id="DivForHoverItem"><p>Shown text</p></div>

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

CSS:

#HiddenText {
   display: none;
}

and the code line up there ^

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

解决方案

The #HiddenText element has to be inside the #DivForHoverItem element if you want to achieve this with CSS. Try something like this:

#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

这篇关于悬停时显示隐藏文字（CSS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！