：悬停=儿童表明（）

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