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

【问题标题】：How to set CSS hover effect, on parent and child elements如何在父元素和子元素上设置 CSS 悬停效果
【发布时间】：2012-02-14 03:45:18
【问题描述】：

假设我有以下代码：

<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>

悬停 wrapper 我希望它是子 title div 来更改它的背景颜色。我可以在纯 CSS 中做到这一点吗？在 js 中，我知道该怎么做。我有兴趣是否存在纯 CSS 方法？

谢谢

【问题讨论】：

标签： css hover

【解决方案1】：

是的，您可以这样做。只是：

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

编辑：
请注意，IE6 仅在 a-elements 上识别 :hover，所以这不起作用 - 但我希望你不必搞乱那个蹩脚的旧东西。

【讨论】：

@James：谢谢你，我正要自己做一个小提琴；）
感谢您的来信。大约 6-7 个月前，我决定不再关心 Ie6。如果有人使用它，他就不值得拥有一个好看的网站。
你很幸运 - 我必须维护一些旧的 Intranet 站点，其中 95% 的用户是 IE6 -.-' （PS：如果这是你的解决方案，请考虑将我的答案标记为接受正在寻找 - 并尝试进一步提高您的接受率，79% 可能会阻止人们回答您的问题）

【解决方案2】：

这个呢？

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

【讨论】：