CSS悬停在div上时如何显示其他类(或)div

这是我的样式表示例

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

当鼠标悬停在class.ab class.ac上时，它应该从0px 的-25像素下降

  .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>

它似乎不起作用。声明中有什么错误吗？请提前帮我谢谢。

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

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

在封面上使用同级选择器演示

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

如果您的两个div都是兄弟，则可以实现它：

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

然后css：

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

会为你的Demo工作。

一般的同级组合子(~(适用于同级组合子。

您可以在.coverdiv中移动.acdiv或在.coverdiv上应用css：

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

相关内容