：懸停=兒童表明（）

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