如何在嵌套div上悬停显示div

Question

我想显示一个不同于嵌套div的悬停效果的div。

显示将鼠标悬停在嵌套的div上是有效的。

.main-div > .nested-div:hover {
border: 1px rgb(0, 0, 0) solid;
}

我想要显示的div类的悬停效果(不起作用(。

.main-div > .nested-div:hover + .display-this {
display: block;
}

类I要显示。

.display-this {
display: none;
}

有问题的div示例：

<div class='main-div'>
<div class='nested-div'>
Hover Me
</div>
</div>
<div class='display-me'>
Display Me
</div>

感谢

Answer 1

为了使其工作，您需要将display-this移动到main-div

当您使用+选择器时，您表示要选择同级元素旁边的元素。

<div class='main-div'>
<div class='nested-div'>
Hover Me
</div>
<div class='display-this'>
Display Me
</div>
</div>