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

谢谢

- Tamás Pap

Answer 1

可以的。只需要这样做：

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

编辑：
请注意，IE6只能识别:hover在a元素上，因此这将无法工作 - 但我希望您不必与那个糟糕的老东西纠缠。

- oezi

---

@James：谢谢你，我正准备自己创建一个fiddle ;) - oezi

谢谢你的留言。大约6-7个月前，我决定不再关注IE6了。如果有人还在使用它，他就不配拥有一个好看的网站。 - Tamás Pap

你很幸运 - 我必须维护一些旧的内部网站，其中95％的用户使用IE6 -.-'（附言：如果这是您要寻找的答案，请考虑将我的答案标记为已接受 - 并尽量提高您的接受率，因为79％可能会阻止人们回答您的问题） - oezi

Answer 2

这个怎么样？

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

- Marcelo Diniz