使用CSS，当我将鼠标悬停在父元素上时，是否可以更改子元素的属性？

Question

我有一个div和一个跨度（带有一些文字和边框）。

<div id='div1'>
    <span id='span1' style='border-right: 1px black solid'>Some text</span>
</div>

我想要做的是：当我将鼠标悬停在该div上时，我想从跨度中移除边框。当我离开div时，我希望边框能够恢复原状。

我可以使用CSS执行此操作，还是应该使用JS / jQuery？

提前多多感谢。

Answer 1

您不需要JavaScript，可以使用css：

#div1:hover #span1 {
    border-width: 0;
}

很简单： - ）

Answer 2

您不能使用：将鼠标悬停在内联样式中，因此您必须将它们移动到样式标记或样式表。

#div1:hover span{
    border:0;
}
#div1 span{
    border-right: 1px black solid;
}

Answer 3

是的，在a：hover状态选择器之后定位选择器相当容易。 jsfiddle在这里创建：http://jsfiddle.net/wigster/a4V8Q/