Наведите указатель мыши на контейнер div выделяет вложенные divs индивидуально

я размещаю функцию "наведения" на класс .one (.one :hover) для изменения background-color до серого. Я ожидаю, что он выделит оба divs (.two, .three) в любое время я наведу курсор на контейнер .one div.

однако то, что он делает, это наведение курсора на два вложенных divs (.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>

1 ответов


Я думаю, что этот CSS поможет вам:

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