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，但是如果您将鼠标悬停在子 div 上，这可能吗？

下面由陈阿斯拉夫回答

Answer 1

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