Hover über Container div hebt verschachtelte divs einzeln hervor

Question

Ich platziere eine "Hover" -Funktion auf Klasse .one (.one :hover), um die background-color in grau zu ändern. Ich erwarte, dass es sowohl div s (.two, .three) hervorhebt, wenn ich über den Container schweben .one div.

Allerdings, was es tut, ist schweben über die beiden verschachtelten div s (.two, .three) einzeln. Kann mir bitte jemand erklären, warum das so ist und was ich tun muss, damit es die gesamte div .one hervorhebt, die ein einziges solides graues div erzeugt?

Unten ist das CSS, das ich verwendet habe.

.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

Ich denke, das CSS wird Ihnen helfen:

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