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

Question

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

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

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

我可以用CSS做到这一点，或者我应该求助于JS/jQuery？

非常感谢。

Answer 1

你不能使用：悬停内嵌样式，所以你必须移动他们风格的标签或样式表。

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

Answer 2

你并不需要JavaScript中，你可以使用CSS：

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

很简单:-)

Answer 3

是的在h：hover状态选择器之后定位选择器是相当简单的。 jsfiddle创建于此：http://jsfiddle.net/wigster/a4V8Q/