jquery - 使用 CSS 查找特定子元素

Question

当具有该类的元素.parent悬停在其上时，它会定位具有该类的子元素.child并将 CSS 应用于它们。

这是jsFiddle

是否可以纯粹用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>​

jQuery：

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

Answer 1

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

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

Answer 2

是的。

.parent .child {
    background: blue;
}

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

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

.parent > .child {
    background: blue;
}

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

正如@hobbs 所说，这在 IE 6 中不起作用，因为:hover仅在 IE 6 中的链接上受支持。

Answer 3

是的，但是您也应该将内联样式移到类中，这样您就不必使用!important声明（否则内联样式将始终覆盖样式表）。

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

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

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

请参阅 jsFiddle。

Answer 4

.parent .child {
    background: blue;
}

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

应该做这项工作，除了:hover只适用于A元素的 IE 版本（jQuery 可以解决这个问题；CSS 不能。）