css - cssでホバー時に2つのdivを移動する方法

Question

私の現在のレイアウトは次のようになります：

「listHolder」と「chapterButton」内に2つのdivを保持する「chapters」という名前の親divがあります

「chapterButton」にカーソルを合わせると、chapterButton と listHolder の両方を左に 150px シフトする必要があります。これはビデオに表示されるため、ビデオ プレーヤーに表示されている chapterButton にカーソルを合わせると、両方ともビデオ プレーヤーに移動し、チャプター (リスト項目のセット) が表示されるようになり、チャプターを選択できるようになりました。

現時点では、兄弟のdivの1つを一度に移動するだけです。では、これらの両方を同時に左にシフトするにはどうすればよいですか。

現在これを使用しています：

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

これは .listHolder 150px を左に移動しますが、これをホバー .chapterButton と .listHolder で左に移動するにはどうすればよいですか?

最も簡単な方法は、これらの両方の div が含まれている親のダイビングを左に移動することですが、子の div にカーソルを合わせた場合、これは可能ですか?

以下のチェン・アスラフによる回答

Answer 1

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