使用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; }