: Hover = Kinder zeigen()

Question

dies erreichen: https://jsfiddle.net/7uuybqbo/

#p1 { 
 
display: none; 
 
} 
 

 
#page1:hover + #p1 { 
 
    display: block; 
 
}

<div class="pg"> 
 
      <div class="pgButton" id="page1">1</div> 
 
      <div id="p1" class="hide"> 
 
       page 1 
 
      </div> 
 
     </div>

Mein Kampf: Wie wenig Code wie möglich, dass das Ergebnis mit mehreren Seiten in diesem Versuch gezeigt erreichen : https://jsfiddle.net/7tw03cyj/

.hide { 
 
      display: none; 
 
     } 
 
     
 
     .pgButton:hover + .pg > div { 
 
      display: block; 
 
     }

<div class="pg"> 
 
      <div class="pgButton" id="page1">1</div> 
 
      <div id="p1" class="hide"> 
 
       page 1 
 
      </div> 
 
     </div> 
 
     <div class="pg"> 
 
      <div class="pgButton" id="page2">2</div> 
 
      <div id="p2" class="hide"> 
 
       page 2 
 
      </div> 
 
     </div>

Vielen Dank im Voraus;)

Answer 1

Ist das wonach Sie suchen? Sie können das Attribut .hide als Qualifikationsmerkmal verwenden.

.hide { 
 
      display: none; 
 
     } 
 
     
 
     .pgButton:hover + .hide { 
 
      display: block; 
 
     }

<div class="pg"> 
 
      <div class="pgButton" id="page1">1</div> 
 
      <div id="p1" class="hide"> 
 
       page 1 
 
      </div> 
 
     </div> 
 
     <div class="pg"> 
 
      <div class="pgButton" id="page2">2</div> 
 
      <div id="p2" class="hide"> 
 
       page 2 
 
      </div> 
 
     </div>

Answer 2

können Sie dies für mehrere Instanzen verwenden:

.hide { 
    display: none; 
} 

.pg .pgButton:hover + .hide { 
    display: block; 
}