移動其他元素當一個元素被懸停時

我在菜單上有三個項目：畫廊，聯繫人和關於。當用戶懸停在畫廊上時，我想要聯繫並即將向下移動，而且我無法做到這一點。任何人都知道我該怎麼辦？移動其他元素當一個元素被懸停時

這裏是我使用的HTML：

<div class="nav" align="center"> 
<a style="opacity: 0;" class="nav_item" id="galleries">GALLERIES</a><br><br><br> 
<div id="lower"> 
<a style="opacity: 0;" class="nav_item" id="about">ABOUT</a><br><br><br> 
<a style="opacity: 0;" class="nav_item" id="contact">CONTACT</a> 
</div> 
</div>

這裏是CSS：

#galleries:hover #lower{ 
top:40%; 
-webkit-transition-property:top; 
-webkit-transition-duration:0.5s; 
}

編輯：

我固定的問題！感謝大家的幫助！

來源

2013-09-25 Alex A

您當前的CSS存在的問題是#lower元素不是#galleries元素的子元素。 – mavrosxristoforos

Seconding @mavrosxristoforos：嘗試將：懸停在.nav上（如果需要，給它一個id） – pintxo

爲什麼不在'＃galleries'上設置「margin-bottom」（假設你的頁面以這種方式執行所述操作... – gvee

據我所知，這是不可能的只用CSS，因爲你正在嘗試調整兄弟元素。（你可以找到一個類似的問題here）

如果我需要做到這一點，我將使用JavaScript onmouseover和onmouseout事件，或使用jQuery（這將簡化代碼很多）這樣做。

來源

2013-09-25 07:57:25 mavrosxristoforos

請更新您的答案，而不是在此發佈，讓其他人看到它，太。 – mavrosxristoforos

爲了實現這一目標，當前的HTML下：

#nav:hover ~ #lower a { 
    top: 40px; 
    -webkit-transition: top 0.5s linear; 
}

JS Fiddle demo。

這將使用普通的兄弟姐妹（~）組合子識別#nav:hover元素的後兄弟姐妹（不所有的兄弟姐妹），以及動畫他們。

我已經使用40px而不是40%，因爲百分比變化需要來自父級的已知高度，在您的問題中未標識。

順便說一句，所有的元素都0的opacity（在您發佈的HTML），與div和br元素之外，如何您的用戶應該確定交互式組件他們看不到？

來源

2013-09-25 09:06:54

移動其他元素當一個元素被懸停時

回答

相關問題