css - 如何在父元素和子元素上设置 CSS 悬停效果

Question

假设我有以下代码:

<div class="wrapper">
  <div class="title"></div>
  <div></div>
</div>

<div class="wrapper">
  <div class="title"></div>
  <div></div>
</div>

<div class="wrapper">
  <div class="title"></div>
  <div></div>
</div>

悬停在一个包装器上时，我希望它的子title div 改变它的背景颜色。 我可以用纯 css 做这个吗？在 js 中，我知道该怎么做。我对是否存在纯 CSS 方法感兴趣？

谢谢

Answer 1

是的，你可以做到这一点。这只是:

.wrapper:hover .title {
  background-color: #f00;
}

编辑:
请注意，IE6 仅在 a 元素上识别 :hover，因此这不会起作用 - 但我希望您不必去弄乱那个蹩脚的旧东西。