Question

当一个具有类.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>

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 notes，这在IE 6中不起作用，因为:hover is only supported on links in 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;
}

See the jsFiddle.

Answer 4

.parent .child {
    background: blue;
}

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

应该做的工作，除了:hover仅适用于A元素的IE版本（jQuery解决这个问题; CSS没有。）

使用CSS查找某些子元素

4 个答案: