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

Question

我在其中有一个 div 和一个 span(带有一些文本和边框)。

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

我想做的是:当我将鼠标悬停在那个 div 上时，我想从 span 中删除边框。当我移出 div 时，我希望边框恢复原样。

我可以使用 CSS 还是应该求助于 JS/jQuery？

非常感谢。

Answer 1

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

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