CSSでブロックレベル要素をロールオーバーさせる

質問

こんにちわ

アンカータグにマウスが乗った場合に、
属する親ブロックレベル要素のスタイルを変更するのは
どのように行うのでしょうか？

#HTML
<div class="box">
<p>タイトル</p>
<p><a href="#">あいうえお</a></p>
</div>

#CSS
通常時
div.box{
border: 1px #dddddd solid;
}
ロールオーバー時
div.box{
border: 1px red solid;
}

回答No.1

ORUKA1951 · ベストアンサー

5.11.3 動的な疑似クラス ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#dynamic-pseudo-classes )
を使用します。

お礼

回答ありがとうございます。
大変勉強になりました。

回答No.3

藤田 朋郎（@hujitomo）

#HTML
<div id="parent" class="box">
<p>タイトル</p>
<p><a href="#" OnMouseOver="changeclass('parent','box2');" OnMouseOut="changeclass('parent','box');">あいうえお</a></p>
</div>

#CSS
<style type="text/css">
<!--
/*　通常時　*/
div.box{
border: 1px #dddddd solid;
}
/*　ロールオーバー時　*/
div.box2{
border: 1px red solid;
}
-->
</style>

#JavaScript
<script type="text/javascript">
<!--
function changeclass(id,class){
document.getElementById(id).className=class;
}
//-->
</script>

お礼

具体的ソースありがとうございます。
参考にさせていただきます。

回答No.2

yambejp

cssで疑似クラスをつかっても親ノードをいじるのは難しいと思います。

無理やりやるならjavascript？

お礼

ご意見ありがとうございます。
どこかのサイトでみた記憶があるので
何かしらの方法がありそうです。