CSS Скрытие и отображение содержимого

Question

Я tring, чтобы скрыть содержимое Div при зависании/выборе другого. Я собрал примерный код, чтобы проиллюстрировать, чего я пытаюсь достичь.

По существу я нужен исходный текст, чтобы не отображать один раз другие снимы парили или похлопали если на мобильном телефоне, но и, очевидно, еще раз показать, если эта картина парила над или постучала снова ..

http://codeply.com/go/EsrJ8Rl1P8

Iv «Я читал о селекторах css, но я просто не могу понять это.

Спасибо.

Answer 1

Хотя синтаксис CSS может выбрать только дочерние элементы и последующее одноуровневые элементы, вы можете воспользоваться атрибутом Flexbox order, чтобы отобразить элемент первой - даже если это на самом деле последующий родственный элемент.

, например.

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>