コンテナdivにカーソルを合わせると、ネストされたdivが個別にハイライトされます

Question

クラス.one（.one :hover）に「ホバー」機能を配置して、background-colorをグレーに変更します。コンテナの上にカーソルを置くと、いつでもdiv（.two, .three）の両方が強調表示されます。.one div。

しかし、それは2つのネストされたdiv（.two,.three）を個別にホバーします。誰かがなぜこれがそうであり、それがdiv全体をハイライトさせるために何をしなければならないかを説明してもらえますか？.one 1つの単色の灰色の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);}