css - 如何使用css在悬停时移动2个div

Question

我目前的布局是这样的：

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

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

目前，我似乎能做的就是一次移动一个兄弟 div。那么我怎样才能同时使这两个左移。

我目前正在使用这个：

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

这确实将 .listHolder 向左移动了 150 像素，但是如何在悬停 .chapterButton 和 .listHolder 向左移动时更改它？

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

下面由陈阿斯拉夫回答

Answer 1

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

Answer 2

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