onmouseoverで複数の要素のstyleを上書きする
マウスオーバー時のCSSスタイルの上書きを複数の要素に対して行わせる処理をjsでやりたいと思っています。
例えば、idがa~jまである8個のリストのうち、b,c,dがグループ1、f,gがグループ2とします。
グループ1のどれかがマウスオーバーしたときにグループ1のほかの2つにclassをつけ、マウスアウトしたらもとに戻す。グループ2でも同様、のような場合のスマートな書き方はないでしょうか?
元のhtml
<ul>
<li id="a">text</li>
<li id="b">text</li>
<li id="c">text</li>
<li id="d">text</li>
<li id="e">text</li>
<li id="f">text</li>
<li id="g">text</li>
<li id="h">text</li>
</ul>
グループ1のcにマウスがあった場合はこうなってほしい
<ul>
<li id="a">text</li>
<li id="b" class="on">text</li>
<li id="c" class="on">text</li>
<li id="d" class="on">text</li>
<li id="e">text</li>
<li id="f">text</li>
<li id="g">text</li>
<li id="h">text</li>
</ul>
グループ2のgにマウスがあった場合はこうなってほしい
<ul>
<li id="a">text</li>
<li id="b">text</li>
<li id="c">text</li>
<li id="d">text</li>
<li id="e">text</li>
<li id="f" class="on">text</li>
<li id="g" class="on">text</li>
<li id="h">text</li>
</ul>
スタイル自体は、cssファイルにもとから入れておくものとする。
マウスアウトしたときはどの場合は元のhtmlの状態にもどる。
このようなイメージです。
idが見つからなかった場合のreturn処理もきちんと入れたいです。
ひとつひとつに書いていくことまでならできたのですが、もう少しシンプルにできたらいいなと思っています。宜しくお願いします。
お礼
displayプロパティで指定できたのですね。 IE6でも確認できました。 ありがとうございます。完璧です。