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

Question

I have a div and a span inside of it (with some text and a border).

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

What I want to do is: when I hover my mouse over that div, I would like to remove the border from the span. And when I move out of the div, I want the border to come back as it was.

Can I do this with CSS or should I resort to JS/jQuery?

Thanks a lot in advance.

Answer 1

You don't need JavaScript, you can use css:

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

Quite simply :-)

Answer 2

You can't use :hover for inline styles, so you'll have to move them to style tags or style sheets.

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

Answer 3

Yes it's rather easy to target the selector after a :hover state selector. jsfiddle created here: http://jsfiddle.net/wigster/a4V8Q/