CSS Inhalt verbergen und anzeigen

Question

Ich versuche den Inhalt einer Div zu verstecken, wenn ich einen anderen schwebe/auswähle. Ich habe eine grobe Codeply zusammengestellt, um zu illustrieren, was ich versuche zu erreichen.

Im Grunde muss ich den ursprünglichen Text nicht angezeigt werden, wenn andere Bilder, wenn auf mobilen schwebte oder geklopft werden aber offensichtlich wieder angezeigt werden, wenn das Bild wieder über oder angezapft schwebte wird ..

http://codeply.com/go/EsrJ8Rl1P8

Iv Ich habe über CSS-Selektoren gelesen, aber ich kann das einfach nicht herausfinden.

Danke.

Answer 1

Obwohl CSS-Syntax nur untergeordnete Elemente und nachfolgende Geschwister Elemente auswählen können, Sie können nutzen die Flexbox Attribut order zunächst ein Element angezeigt werden - auch wenn es Element tatsächlich eine nachfolgende Geschwister ist.

z.B.

body { 
 
display: flex; 
 
} 
 

 
section { 
 
width: 160px; 
 
height: 160px; 
 
margin-right: 40px; 
 
text-align: center; 
 
font-weight: bold; 
 
color: rgb(255,255,255); 
 
background-color: rgb(255,0,0); 
 
order: 1; 
 
} 
 

 
.initial { 
 
order: 0; 
 
} 
 

 
.icon { 
 
display:block; 
 
margin: 10px auto; 
 
width: 60px; 
 
height: 60px; 
 
} 
 

 
p, section:hover ~ section p { 
 
display: none; 
 
} 
 

 
.initial p, section:hover p { 
 
display: block; 
 
}

<section> 
 
<div class="icon" />Hover over me</div> 
 
<p>When this text is visible, I need the others to vanish!</p> 
 
</section> 
 

 
<section> 
 
<div class="icon" />Hover over me</div> 
 
<p>When this text is visible, I need the others to vanish!</p> 
 
</section> 
 

 
<section class="initial"> 
 
<div class="icon" />Hover over me</div> 
 
<p>This is visible initially</p> 
 
</section>