CSS：如何将下一个元素立即悬停

Question

我需要悬停元素<a>以显示元素<d>，但在<a>和<d>之间有<b>和<c>。可能只使用CSS。

这是HTML代码：

<a>Riferimenti bibliografici</a>
<b/>
<c>
<d>Oxford: Oxford University Press.</d>

有可能吗？

Answer 1

在您提供的特定用例中，可以使用通用兄弟组合器 ~ - 只要问题中的元素是兄弟元素

  

一般兄弟组合

     

~组合子选择兄弟姐妹。这意味着第二个   元素遵循第一个（虽然不一定立即），和   两者都是同一个父母   语法： A ~ B
  示例： p ~ span将匹配<span>后的所有<p>元素。

CSS selectors - CSS | MDN

a:hover ~ d {
  display: block;
}

d {
  display: none;
}

<a>hover over to reveal element below</a>
<br>
<c></c>
<d>Oxford: Oxford University Press.</d>

Answer 2

HTML

<div class="a">Hello</div>
<div class="b">Hi</div>
<div class="c">Whats'up</div>
<div class="d">Cool!</div>

CSS

.a:hover  ~ .d {opacity:1;}
.d {opacity:0;transition:1s;}

结帐CODEPEN