：ホバー=子供たちは

Question

はこれを達成（）を示しています。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>

私の闘争：可能な限り、コードのように少量、この試みに示す複数のページで結果を達成します：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>

ありがとうございます;）

Answer 1

これはあなたが探しているものですか？修飾子として.hide属性を使用できます。

.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

あなたは複数のインスタンスのためにこれを使用することができます。

.hide { 
    display: none; 
} 

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