纯CSS悬停是否可以显示另一个元素？

Question

纯CSS悬停是否可以显示另一个元素？

25

<a href="">
  text here always show
 <div  style="display:none;">
   hide text here
 </div>
</a>


a:hover{

//when hover show 'hide text here' ; when not hover, hide it again 
}

能否使用纯CSS实现这种效果？

- cometta

3

注意：您不应嵌套<div>，因为它是一个块级元素，而<a>是内联级别的。将<div>更改为<span>，您的HTML将得到验证。 - Pat

3

@Pat 在HTML5中，允许使用块级链接（block level links）。 - robertc

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- robertc · Accepted Answer

49

a div {
    display: none;
}

a:hover div {
    display: block;
}

- robertc

一个 display:none 的元素如何被悬停？ - Hari krishnan

@Harikrishnan 一个display: none的元素无法被悬停。你为什么要问？ - robertc

你的CSS中首先a是none，那么它怎么能被悬停呢？ - Hari krishnan

@Harikrishnan 在我的 CSS 中，a 不是 display: none。 - robertc

我不理解你的CSS，所以才问的。 - Hari krishnan

1

@Harikrishnan a div {} 作为 CSS 选择器，选择的是作为 a 子元素出现的 div 元素。 - Marcel