如何在父元素和子元素上设置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>

在悬停包装时，我希望它的子标题 div改变它的背景颜色。 我可以用纯CSS做到这一点。在js我知道如何做到这一点。如果存在纯粹的CSS方法，我感兴趣吗？

由于

Answer 1

是的，你可以这样做。它只是：

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

修改
请注意，IE6仅在:hover - 元素上识别a，因此这不起作用 - 但我希望您不必弄乱这个糟糕的旧事物。

Answer 2

这是怎么回事？

.wrapper:hover .title {
    background-color: blue;
}