CSS 鼠标悬停时显示另一个元素

Question

我想使用CSS来实现当我悬停在div id='a'上时显示div id='b'，但是我无法解决这个问题，因为div 'a'在另一个div中而div 'b'不在其中。

<div id='content'>
     <div id='a'>
         Hover me
     </div>
</div>
<div id='b'>
    Show me
</div>

- user2770029

---

除非你1）改变你的标记语言以使其具有嵌套/父/祖先关系，2）使用JavaScript/jQuery，否则无法完成。 - Jawad

只有当它们是嵌套的时候，你才能使用 CSS 来实现这个。 - crush

谢谢，只是需要确认一下。 - user2770029

@Jawad 从另一个用户的个人资料中借用了这一句。我觉得在当今世界中是恰当和必要的。=} - crush

从这个问题的答案中我们可以知道，父选择器并不被所有浏览器（Firefox）支持。我认为一个解决方法是使用JS。 - Lerner Zhang

请注意：如果您有兴趣使某个功能依赖于悬停效果，请不要忘记一些设备不支持悬停（例如某些手机和平板电脑）。如果您正在使用CSS，您可以通过悬停CSS媒体查询来检查悬停支持。这将确定用户的主要输入方式是否可以悬停在元素上。参见：https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover - adnauseam

Answer 1

我们只需在鼠标悬停时显示相同的标签div，像这样

<style>
#b {
    display: none;
}

#content:hover~#b{
    display: block;
}

</style>

- Ankit Agrawal

---

今日学到，这个方法有效——只有当#b在#content之后时才会生效。 - DACrosby

精度：如果＃b不直接在＃content之后，它也能正常工作。这使得交换成为可能。 我对CSS如何有时消除基本交互的JQuery / Javascript的需求感到困惑。 - Christian Bonato

@DACrosby 在你的 fiddle 中，#b2 什么时候会显示？ - Shafizadeh

使用注意到的HTML和仅使用CSS，@Sajad永远不会因为兄弟选择器不能向后穿越HTML（只能向前），而产生问题。您需要将#content放在#b2之前，或者使用JavaScript，或者使用DOM中较早或较高的元素的:hover. - DACrosby

Answer 2

使用以下代码确实是可能的

<div href="#" id='a'>
  Hover me
</div>
    
<div id='b'>
  Show me
</div>

和 CSS

#a {
  display: block;
}
    
#a:hover + #b {
  display:block;
}
    
#b {
  display:none;
}

现在当鼠标悬停在元素#a上时，会显示出元素#b。

- Sharath kumar

Answer 3

您可以使用axe选择器来实现这一点。

有两种方法：

1. 立即父级 < axe 选择器

#a:hover < #content + #b

这个axe样式规则将选择#content的直接父元素#a的直接兄弟元素#b，该元素具有:hover状态。

div {
display: inline-block;
margin: 30px;
font-weight: bold;
}

#content {
width: 160px;
height: 160px;
background-color: rgb(255, 0, 0);
}

#a, #b {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}

#a {
color: rgb(255, 0, 0);
background-color: rgb(255, 255, 0);
cursor: pointer;
}

#b {
display: none;
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 255);
}

#a:hover < #content + #b {
display: inline-block;
}

<div id="content">
<div id="a">Hover me</div>
</div>

<div id="b">Show me</div>

<script src="https://rouninmedia.github.io/axe/axe.js"></script>

2. 远程元素axe选择器 (\)

---

#a:hover \ #b

这个axe样式规则将选择#b，它存在于与具有:hover状态的#a相同的文档中。

div {
display: inline-block;
margin: 30px;
font-weight: bold;
}

#content {
width: 160px;
height: 160px;
background-color: rgb(255, 0, 0);
}

#a, #b {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}

#a {
color: rgb(255, 0, 0);
background-color: rgb(255, 255, 0);
cursor: pointer;
}

#b {
display: none;
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 255);
}

#a:hover \ #b {
display: inline-block;
}

<div id="content">
<div id="a">Hover me</div>
</div>

<div id="b">Show me</div>

<script src="https://rouninmedia.github.io/axe/axe.js"></script>

- Rounin - Standing with Ukraine

---

https://github.com/RouninMedia/axe 这是这个吗？虽然它没有得到官方支持，但这是你的项目。 - TankorSmash

是的，这还在不断进展中。如果你愿意，可以将其视为一个概念验证。 - Rounin

这是正确的答案，因为它仅在悬停于 #b 时显示元素，而不是仅在悬停于 #content 时。 - Sileo

你做得很好 @Rounin。你的库（library）非常有帮助。我会更加深入地学习它。我也很愿意成为持续成功的一部分。如果有任何我能帮忙的方式，请告诉我。 - Olamigoke Philip

你非常友善，@Olamigoke Philip。目前已经完成了约33％（老实说，自2017年1-2月以来我并没有真正地工作在它上面）。如果一切顺利，我计划在2021年推进_axe_ 。最重要的是，我想大幅推进 axeBlades 扩展功能。 - Rounin

Answer 4

使用相邻兄弟组合器+，它匹配紧接着的下一个兄弟节点。
然后可以使用类来实现多个独立的悬停效果：

<div class='a'>
  Hover me 1
</div>
<div class='b'>
  Show me 1
</div>


<div class='a'>
  Hover me 2
</div>
<div class='b'>
  Show me 2
</div>

.b {
  display: none;
}

.a:hover + .b {
  display: block;
}

- Grastveit

Answer 5

如果有人正在使用position:absolute，您可能会遇到上述方法的问题。确保您也处理绝对元素的悬停。

<div class='content'>
  Hover me 1
</div>
<div class='hover'>
  Show me 1
</div>

.hover {
  position: absolute;
  visibility: hidden;
}
.content:hover + .hover {
  visibility: visible !important;
}
.hover:hover {
  visibility: visible !important;
}

- Стефан Дражић