css - Show other element on hover effect

Question

I am wondering if how could I show other element when the user hovers to a certain element.

For example,

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

If the user hovers on .hoverMe the .showMe will be shown in pure css thankz.

Answer 1

我还没有 50 个代表，所以我无法对上述答案发表评论。

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

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

MDN 文档

Answer 2

您必须使用相邻的兄弟选择器 +

.hoverMe:hover + div {
  display:block;
}

来自 MDN

它将仅选择前一个元素紧接在其前面的元素

小提琴

使用 jQuery，您将不得不使用该hover()函数

$(".hoverMe").on("hover", function () {
  $(".showMe").css("display", "block");
});