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

Answer 2

您必须使用adjacent sibling selector +

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

来自MDN

它将仅选择前一个元素
之前的元素

Fiddle

使用jQuery，您必须使用hover()函数

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

显示悬停效果的其他元素

2 个答案: