html - CSS を使用すると、親要素にカーソルを合わせたときに子要素のプロパティを変更できますか?

Question

その中に div と span があります (テキストと境界線があります)。

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

私がやりたいことは、マウスをそのdivの上に置くと、スパンから境界線を削除したいということです。そして、div の外に移動するときは、境界線を元に戻したいと考えています。

CSS でこれを行うことができますか、それとも JS/jQuery に頼るべきですか?

よろしくお願いします。

Answer 1

JavaScript は必要ありません。css を使用できます。

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

非常に単純に ：-）

Answer 2

はい、:hover 状態セレクターの後にセレクターをターゲットにするのはかなり簡単です。ここで作成された jsfiddle: http://jsfiddle.net/wigster/a4V8Q/