CSS On hover 显示另一个元素

Question

当我将鼠标悬停在 div id='a' 上时，我想使用 CSS 显示 div id='b'，但我不知道该怎么做，因为 div 'a' 在另一个 div 中，而 div 'b' 不在其中。

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

Answer 1

我们可以像这样在悬停时显示相同的标签 div

<style>
#b {
    display: none;
}

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

</style>

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。

Answer 3

您可以为此使用 axe 选择器。

有两种方法：

1。直接父 ax 选择器 (<)

#a:hover < #content + #b

此axe 样式规则将选择#b，它是#content 的直接兄弟，#a 的直接父级具有: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。远程元素斧头选择器 (\)

#a:hover \ #b

此axe 样式规则将选择#b，它与#a 存在于同一文档中，: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 \ #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>