CSS: wie ein Element schweben nicht sofort nächste

Question

Ich brauche <a> Element zu schweben Element zu zeigen <d>, aber zwischen <a> und <d> gibt es <b> und <c>. Möglicherweise nur mit CSS.

Dies ist der HTML-Code:

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

Ist es möglich?

Answer 1

In dem speziellen Anwendungsfall Sie vorgelegt haben, der allgemein Geschwister Kombinator~ verwendet werden kann - so lange, wie das Element in Frage ein Geschwisterelement ist.

Allgemeine Geschwister combinator

Die ~ combinator wählt Geschwister. Dies bedeutet, dass das zweite Element dem ersten folgt (obwohl nicht unbedingt sofort), und beide das gleiche Elternteil teilen.
Syntax:A ~ B
Beispiel:p ~ span alle <span> Elemente entsprechen, die eine <p> folgen.

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

Zur Kasse gehen CODEPEN