2

这是我的示例样式表

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

悬停时，类 .ab 类 .ac 应该从 -25px 从 0px 下降

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

它似乎不起作用，声明有什么问题，请帮助我，谢谢。

4

3 回答 3

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

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

于 2013-04-22T06:36:45.630 回答
2

在 Cover 上使用 Sibling 选择器。Demo

  .cover:hover ~ .ac { top:0px }
于 2013-04-22T06:37:16.083 回答
0

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

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

然后是CSS：

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

将为您工作 Demo。

一般兄弟组合子( ~) 适用于兄弟姐妹。

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

.cover:hover ~ .ac { top:0px }
于 2013-04-22T06:42:08.553 回答