Question

这是我的样本样式表

 <style>  
 .cover{ margin 0 auto;}    
  .cover .ab{ display:inline-block color:#000; height:25px;}

同时悬停类.ab类.ac应该从0px

下降到-25px

  .cover .ab:hover .ac{ top:0px }  
  .ac{ position:absolute; top:-25px; height:25px;} 
   </style>

我的HTML看起来像

      <body>
       <div class="cover">
       <div class="ab">&nbsp;</div>
       </div>
       <div class="ac">&nbsp;</div>
       </body>

它似乎没有作用是否有任何错误的声明请帮助我谢谢提前。

Answer 1

.cover .ab:hover .ac { top:0px }

这不起作用，因为.ac不是.ab的孩子（顺便说一下，也不是.cover的孩子）。

Answer 2

在Cover上使用Sibling选择器。 Demo

  .cover:hover ~ .ac { top:0px }

Answer 3

如果你的两个div都是兄弟姐妹，你可以实现它：

<div class="cover">
   <div class="ab">asdfa</div>     
   <div class="ac">test</div>
</div>

然后css：

.ab:hover ~ .ac{ top:0px;height:25px; }

适合您[{3}}。

working Demo（~）适用于兄弟姐妹。

您可以在.ac div中移动.cover div或在.cover div上应用css：

.cover:hover ~ .ac { top:0px }