如何用css悬停2个div

Question

我目前的布局是这样的：

我有一个名为“chapters”的父div，其中包含“listHolder”和“chapterButton”中的2个div。

当我将鼠标悬停在“chapterButton”上时，我希望chapterButton和listHolder都将150px向左移动，这是继续播放视频所以当你将鼠标悬停在视频播放器上可见的chapterButton时，它们都转移到视频上播放器和章节（一组列表项）现在可见，因此您可以选择章节。

目前我所能做的就是一次移动一个兄弟div。那么我怎么能同时让这两个转变。

我目前正在使用这个：

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

这确实将.listHolder向左移动了150px，但是如何在悬停时更改此信息.chapterButton和.listHolder向左移动？

最简单的方法是将父潜水向左移动，因为它包含这两个div，但如果您将鼠标悬停在子div上，这是否可行？

chen asraf在下面回答

Answer 1

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

Answer 2

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