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 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;
}