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

Posted 2023-05-08

【中文标题】如何在父元素和子元素上设置 CSS 悬停效果

【英文标题】：How to set CSS hover effect, on parent and child elements

【发布时间】：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 方法？

谢谢

【参考方案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;