Hover over container div is highlighting nested divs individually

Question

I am placing a "hover" feature on class .one (.one :hover) to change the background-color to grey. I am expecting it to highlight both divs (.two, .three) any time I hover over the container .one div.

However, what it does is hover over the two nested divs (.two, .three) individually. Can someone please explain why this is so and what I have to do to make it highlight the entire div .one creating one single solid grey div?

Below is the CSS I used.

.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

I think this CSS will help you:

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