html - CSS:使用悬停显示 div

Question

我想在鼠标悬停时看到第二个 div。

HTML

<a>Hover over me!</a>
<div class="ab">Some content</div>
<div class="abc">Some text here</div>

CSS

.abc {
    display: none;
}
a:hover + .abc{
    display: block;

}

Answer 1

adjacent sibling combinator 并不是您想要的。它只能选择类为 .ab 的 div，因为它直接跟在 anchor 之后。

你要的是这个:

a:hover ~ .abc {
    /*...*/
}

这会选择悬停的 anchor 元素之后的每个 .abc，但它不必直接在它之前。