マウスオーバー時のCSSスタイルの上書きを複数の要素に対して行わせる処理をjsでやりたいと思っています。例えば、idがa～ｊまである8個のリストのうち、b,c,dがグループ１、f,gがグループ２とします。グループ１のどれかがマウスオーバーしたときにグループ１のほかの２つにclassをつけ、マウスアウトしたらもとに戻す。グループ２でも同様、のような場合のスマートな書き方はないでしょうか？元のhtml text text text text text text text text グループ１のcにマウスがあった場合はこうなってほしい text text text text text text text text グループ2のgにマウスがあった場合はこうなってほしい text text text text text text text text スタイル自体は、cssファイルにもとから入れておくものとする。マウスアウトしたときはどの場合は元のhtmlの状態にもどる。このようなイメージです。 idが見つからなかった場合のreturn処理もきちんと入れたいです。ひとつひとつに書いていくことまでならできたのですが、もう少しシンプルにできたらいいなと思っています。宜しくお願いします。

No.1です。 idは個別の識別子ということになっているので、書き換えるとDOMでのアクセスに支障がきたすと思うけど？上記の理由で、idの書き換えはできないブラウザもあると思います。新規の作成したオブジェクトならid設定もできると思うけど。（このあたりは未検証）＞ text-b にマウスがフォーカスされた場合～～最初に、イベントをタグに設定しておくか、あるいは処理ルーチン側でのクラス設定をするかわりに、子要素のタグにクラス設定をすればいいだけです。実際のタグ構成が不明ですが、firstChildに決めうちでよいのなら document.getElementById(elm[i]).firstChild.className = f; みたいな感じ。

onmouseoverで複数の要素のstyleを上書きする

解決済

質問者：monaka416
質問日時：2009/02/12 02:08
回答数：3件

マウスオーバー時のCSSスタイルの上書きを複数の要素に対して行わせる処理をjsでやりたいと思っています。

例えば、idがa～ｊまである8個のリストのうち、b,c,dがグループ１、f,gがグループ２とします。
グループ１のどれかがマウスオーバーしたときにグループ１のほかの２つにclassをつけ、マウスアウトしたらもとに戻す。グループ２でも同様、のような場合のスマートな書き方はないでしょうか？

元の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>

グループ１の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処理もきちんと入れたいです。

ひとつひとつに書いていくことまでならできたのですが、もう少しシンプルにできたらいいなと思っています。宜しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2009/02/12 11:31

グループ毎にNoでも付けておいて、<li>にイベントを設定すれば良いのでは？

以下、ご参考まで。
<html>
<head>
<style>
li { width:100; }
.on { color:red; }
</style>
<script>
var group = ['b,c,d','f,g'];
window.onload = function(){
for (var i=0;i<group.length; i++){
var elm = group[i].split(',');
for (var j=0; j<elm.length; j++){
document.getElementById(elm[j]).onmouseover = (function(n_,f_){return function(){hoge(n_,f_);};})(i,'on');
document.getElementById(elm[j]).onmouseout = (function(n_,f_){return function(){hoge(n_,f_);};})(i,'');
}
}
}
function hoge(g,f){
var elm = group[g].split(',');
for (var i=0; i<elm.length; i++){
document.getElementById(elm[i]).className = f;
}
}
</script>
</head>
<body>
<ul>
<li id="a">text-a</li>
<li id="b">text-b</li>
<li id="c">text-c</li>
<li id="d">text-d</li>
<li id="e">text-e</li>
<li id="f">text-f</li>
<li id="g">text-g</li>
<li id="h">text-h</li>
</ul>
</body>

この回答への補足

fujillinさん、ありがとうございます。とてもわかりやすいです。
あと、今回は新しくクラス名を付けるという処理をしたのですが、以下のようにid名を変えるということは出来るでしょうか？

<li id="b">text-b</li>にマウスがフォーカスされた場合
→
<li id="b_on">text-b</li>
<li id="c_on">text-c</li>
<li id="d_on">text-d</li>

もしくは、<li id="b_on">text-b</li>　の中にある<a>に、新規のクラスを振る
<li id="b"><a href="#">text-b</a></li>にマウスがフォーカスされた場合
<li id="b"><a href="#" class="on">text-b</a></li>
<li id="c"><a href="#" class="on">text-c</a></li>
<li id="d"><a href="#" class="on">text-d</a></li>

たびたびですみませんが、ご教授いただけるとうれしいです。
よろしくお願いします。

補足日時：2009/02/12 12:43

通報する

- 0
- 件

通報する

No.3

回答者： fujillin
回答日時：2009/02/12 13:30

No.1です。

idは個別の識別子ということになっているので、書き換えるとDOMでのアクセスに支障がきたすと思うけど？

上記の理由で、idの書き換えはできないブラウザもあると思います。新規の作成したオブジェクトならid設定もできると思うけど。（このあたりは未検証）

＞<li id="b"><a href="#">text-b</a></li>にマウスがフォーカスされた場合～～
最初に、イベントを<a>タグに設定しておくか、あるいは処理ルーチン側で<li>のクラス設定をするかわりに、子要素の<a>タグにクラス設定をすればいいだけです。
実際のタグ構成が不明ですが、firstChildに決めうちでよいのなら
　document.getElementById(elm[i]).firstChild.className = f;
みたいな感じ。

- 0
- 件

通報する

この回答へのお礼

fujillinさん

お返事が遅くなってすみません。
ありがとうございます、子要素への設定でうまくできました！
とても勉強になりました、ありがとうございます！

通報する

お礼日時：2009/02/13 14:53

No.2

回答者： _pipi_
回答日時：2009/02/12 12:10

これで良いのか、毎回微妙～。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>GroupCSSChanger?</title>
<style type="text/css">
.on0 { color:red; }
.on1 { color:blue; }
.off { color:green; }
</style>
<ul id="onakasuita">
<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="h">text</li>
<li id="g">text</li>
</ul>

<script type="text/javascript">
//全角スペースは半角に変換のこと
//@cc_on
(function () {

new GCSSC('onakasuita', 'off', 'on0', 'b', 'c', 'd');
new GCSSC('onakasuita', 'off', 'on1', 'f', 'g');

function GCSSC (group, css0, css1) {
　var count, e, p;
　this.css0 = css0;
　this.css1 = css1;
　this.list = [];
　this.group = document.getElementById(group);
　
　count = 3;
　while (e = arguments[count++]) {
　　document.getElementById(e).className = css0;
　　this.list.push(e);
　}
　this.group./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'mouseover',
　　(function (cb_) { return function (evt) {
　　　var i, j, m, eid = (evt.target || evt.srcElement).id;
　　　for (i = 0, m = cb_.list.length; i < m; i++) {
　　　　if (eid == cb_.list[i]) {
　　　　　for (j = 0; j < m; j++)
　　　　　　document.getElementById(cb_.list[j]).className = cb_.css1;
　　　　　break;
　　　　}
　　　}
　　}; })(this),
　 false);

　this.group./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'mouseout',
　　(function (cb_) { return function () {
　　　var i = 0, m = cb_.list.length;
　　　for (; i < m; document.getElementById(cb_.list[i++]).className = cb_.css0);
　　}; })(this),
　 false);
}
})();
</script>