CSS懸停一個div如何顯示其他類（或）div？

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

而懸停類.ab類.AC應該從-25px下降，由0像素

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

它不似乎沒有作用是有任何錯誤的聲明，請幫助我感謝n前進。

除非'.ac'是'.ab'，嘗試jQuery的一個孩子，你不能用CSS做 – slash197 2013-04-22 06:36:33

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

這不起作用，因爲.ac不是.ab的孩子（也不是.cover的孩子）。

2013-04-22 06:36:45

在蓋子上使用兄弟選擇器。 Demo

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

2013-04-22 06:37:16 PSL

謝謝花花公子PSCoder ..談點想法.. :) – 2013-04-22 06:43:51

:)你可以重新安排你的html來使用adjascent兄弟選擇器或兄弟選擇器..在這種情況下，直到css3你所尋找的是不可能的。如果你想在不改變你的html的情況下實現這個目標，你可能想要使用JS/jquery。 – PSL 2013-04-22 06:45:20

就可以實現它，如果你的兩個div的所有是兄弟：

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

然後CSS：

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

會爲你工作working Demo。

general sibling combinator（~）適用於兄弟姐妹。

你可以移動.ac格在.cover股利或.cover DIV應用CSS：

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

2013-04-22 06:42:08

回答