hover - コンテナ div にカーソルを合わせると、ネストされた div が個別に強調表示されます

Question

.oneクラス( ) に「ホバー」機能を配置して、グレー.one :hoverに変更します。コンテナーdivにカーソルを合わせると、両方の s ( )background-colorが強調表示されることを期待しています。div.two, .three.one

ただし、それが行うことは、ネストされた 2 つdivの s ( .two、.three) を個別にホバーすることです。誰かがなぜそうなのか、そして div 全体を強調表示して.one単一の灰色の div を作成するために私がしなければならないことを説明できますか?

以下は私が使用したCSSです。

.one {
  width: 200px;
  display: inline-block;
}

.two {
  background-color: rgba(0, 51, 102, 1);
  width: 50px;
  height: 100px;
  float: left;
}

.three {
  background-color: rgba(0, 204, 204, 1);
  width: 150px;
  height: 100px;
  float: right;
}

.one :hover {
  background-color: rgba(153, 153, 153, 1);
}

<div class="one">
  <div class="two">
  </div>
  <div class="three">
  </div>
</div>

Answer 1

このCSSが役立つと思います：

.one:hover .two, .one:hover .three {
background-color: rgba(153,153,153,1);}