Jquery 使用CSS查找某些子元素

当类为

.parent

的元素悬停在上方时，它将定位类为

.child

的子元素，并将CSS应用于它们

纯用CSS能达到这种效果吗

html:

<div class="parent" style="background:red;margin:20px;padding:20px;">
    <div class="child" style="background:blue;margin:20px;padding:20px;"></div>
</div>

<div class="parent" style="background:red;margin:20px;padding:20px;">
    <div class="child" style="background:blue;margin:20px;padding:20px;"></div>
</div>​

$('.parent').hover(
  function () {
    $(this).find('.child').css('background','yellow');
  }, 
  function () {
    $(this).find('.child').css('background','blue');
  }
);​

---

删除内联样式并将以下内容放入样式表中：

/* CSS */
.parent { background: red; margin: 20px; padding: 20px; }
.child {background blue; margin: 20px; padding: 20px;}
.parent:hover > .child { background: yellow; }

应该做这项工作，但IE版本除外，其中

：hover

只对

A

元素起作用（jQuery可以解决这个问题；CSS不能）。

是的

.parent .child {
    background: blue;
}

.parent:hover .child {
    background: yellow;
}

这复制了jQuery的效果。如果您的字面意思是“孩子”（与您实际发现的后代相反），那么您需要以下内容：

.parent > .child {
    background: blue;
}

.parent:hover > .child {
    background: yellow;
}

---

同样，这在IE6中不起作用，因为。

是的，但是您也应该将内联样式移动到类中，这样您就不必使用

！重要信息

声明（否则内联样式将始终覆盖样式表）

---

没问题：）真是个有用的小把戏。有关更有用的选择器，请参阅本文：OK。假设他取出内联样式并将它们移动到样式表中。是的，或者

！重要信息

覆盖内联样式。@UserIsCorrupt:应避免使用

！重要信息

尽可能声明。您可能还存在一些浏览器兼容性问题，如果“>”不是必需的，我会将其删除（即，如果“child”类没有其他子级，则不需要该类，如果您担心旧浏览器，则修复了一个可能的问题…

.parent > .child {
    background: blue;
}

.parent:hover > .child {
    background: yellow;
}

<div class="parent">
    <div class="child"></div>
</div>

<div class="parent">
    <div class="child"></div>
</div>​