javascript - 我想将鼠标悬停在一个元素上以影响其他元素

在我的主框元素上添加了一个悬停状态，我希望它变成灰色而其中的文本变成白色

这是主要元素：.blogcont

其中还有2个其他元素，分别是h4和另一个text div：.listing

我想在.blogcont悬停状态下将h4和另一个div的字体颜色更改为白色

最佳答案

希望这可以帮助！

.blogcont {
  width: 300px;
  height: 300px;
  background: red;
  color: black
}
.blogcont:hover {
  background: grey;
}
.blogcont:hover h4,
.blogcont:hover .listing {
  color: white
}

<div class="blogcont">
  <h4>hellooo</h4>
  <div class="listing">listingggg</div>
</div>