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

<style>
#b {
    display: none;
}

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

</style>

使用下面的代码确实可以做到这一点

<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。

你可以使用axe选择器来实现。
有两种方法：

1.直接父轴选择器（<）

#a:hover < #content + #b

这个axe样式的规则将选择#b，它是#content的直接兄弟，#content是#a的直接父，#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存在于同一个文档中，而#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>

使用adjacent sibling combinator、+，它与紧邻的下一个同级匹配。
然后，类可以用于多个独立悬停：

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

如果有人在使用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;
}