如何移動2個div的懸停利用CSS

我有一個名爲「章」，其保持2個div的內部「listHolder」和「chapterButton」

當父DIV我將鼠標懸停在「chapterButton」上，我希望chapterButton和listHolder都將150px向左移動，這樣就可以播放視頻，因此當您將鼠標懸停在視頻播放器上可見的chapterButton上時，它們都會轉到視頻播放器和章節（一組列表項目）現在可見，所以你可以選擇你的章節。

此刻，我看起來所能做的就是一次移動其中一個兄弟分區。所以我怎樣才能讓這兩個轉變同時離開。

即時通訊目前正在使用此：

.chapterButton:hover + .listHolder{ 
position:relative; 
right:150px; 
}

這並移動.listHolder 150像素的離開，但我怎樣才能改變這種做法，懸停.chapterButton和.listHolder向左移動？

最簡單的方法是將父潛水器左移，因爲它包含這兩個div，但是如果您將鼠標懸停在子div上，可能會發生這種情況嗎？

回答了陳asraf下面

來源

2013-07-09 Aidan Gee

可以提供的jsfiddle？ – seemly

http://jsfiddle.net/ZPwcX/ 我沒有放入視頻，但處於正常狀態時菜單位於右側，隱藏時位於左側，可見。所以我想要箭頭向左移動菜單 –

.chapterButton:hover, .chapterButton:hover + .listHolder { 
    position:relative; 
    right:150px; 
}

來源

2013-07-09 15:19:39 casraf

謝謝你！正是我所尋找的 –

沒問題，請將此標記爲接受:) – casraf

.chapters:hover > * { 
    position:relative; 
    right:150px; 
}

來源

2013-07-09 15:15:20 seemly

如何移動2個div的懸停利用CSS

回答

相關問題