css - 在悬停效果上显示其他元素

Question

我想知道当用户悬停在某个元素上时如何显示其他元素。

例如，

<div class = "hoverMe">Hover Me </div>

<div class = "showMe">Hello I'm in show state.</div>

.showMe{ 
   display: none;
}

.hoverMe:hover { 
     // then what to put here?
}

如果用户悬停在 .hoverMe 上，.showMe 将以纯 css 显示，谢谢。

Answer 1

我还没有 50 个代表，所以我不能对上面的答案发表评论。

可以使用波浪号 (~) 纯粹在 CSS 中完成此操作；

.hoverMe:hover ~ .showMe {
    display: block;
}

MDN docs