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

Question

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

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

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

我可以用 CSS 做到这一点还是应该求助于 JS/jQuery？

提前非常感谢。

score 3 · Accepted Answer

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

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

很简单:-)

score 3 · Accepted Answer

您不能将 :hover 用于内联样式，因此您必须将它们移动到样式标签或样式表中。

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

score 1 · Accepted Answer

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

3 回答 3