- ベストアンサー
onmouseoverで複数の要素のstyleを上書きする
マウスオーバー時の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処理もきちんと入れたいです。 ひとつひとつに書いていくことまでならできたのですが、もう少しシンプルにできたらいいなと思っています。宜しくお願いします。
- monaka416
- お礼率50% (4/8)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
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; みたいな感じ。
お礼
fujillinさん お返事が遅くなってすみません。 ありがとうございます、子要素への設定でうまくできました！ とても勉強になりました、ありがとうございます！
これで良いのか、毎回微妙～。 <!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>
お礼
_pipiさん 返信が遅くなってすみません、回答ありがとうございました。 違う方法でやりましたが、勉強させていただきました！ どうもありがとうございました。
関連するQ&A
- 指定要素をスクロール時に非表示
JSで、divで囲ったある指定要素をスクロールしたら非表示にしたいのですが、 当方jsにまったく疎く、書き方がわかりません。 どなたかお助けいただけますと助かります。 サンプルなのですが、HTMLファイルのコードは以下になります。 <div id="subNav"> <ul class="fixed"> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> </ul> </div>
- 締切済み
- JavaScript
- jqueryで特定の要素をdivで囲う
jqueryを使い、HTMLの特定の要素をdivで囲いたいと思っています。 元のHTMLのソースは、 ========= <div class="tabWrap02 tabSwitcher materialityRefine"> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-1" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-2" class="tabDetail" style="display: none;"> </div> <h2 class="headline06 mb20">×××</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-3" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-4" class="tabDetail" style="display: none;"> </div> </div> ========= このようになっております。 上記のソースを、以下のように２か所<div class="wrap">で<ul class="spAcodNav">を囲いたいと思っています。 ========= <div class="tabWrap02 tabSwitcher materialityRefine"> <h2 class="headline06 mb20">●●●</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <div class="wrap"> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-1" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-2" class="tabDetail" style="display: none;"> </div> </div> <h2 class="headline06 mb20">×××</h2> <ul class="tabNav range8Col textSmall mb50 range17Col upper"> <li class="active" style="height: 65px;"></li> <li></li> <li></li> </ul> <h2 class="headline06 jqa mb20" style="display: none;"></h2> <ul class="tabNav range9Col textSmall organizationRefine range17Col upper"> <li class="needTitle active" style="height: 50px;"></li> <li></li> <li></li> </ul> <div class="wrap"> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-3" class="tabDetail" style="display: none;"> </div> <ul class="spAcodNav"> <li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;"> <li></li> </ul> <div id="tab02-4" class="tabDetail" style="display: none;"> </div> </div> </div> ========= jqueryでwrapAllなどを使って試しているのですが、うまいいかず、 お分かりいただける方いらっしゃいましたらご教授いただけますと幸いです。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- タグ内にあるタグに影響させないイベントハンドラの使い方は？
次のようなHTML文の部分があった場合に於いて、最外部に設置したイベントハンドラを、内部にあるタグに対して無効にするにはどうしたらよいのでしょうか？ 具体的にはid="t1"なるul要素以外の内部の各要素上（liやa等）におけるonmouseoutを無効にするには、どうしたらよいのでしょうか？ 最外部のul要素からマウスがoutした時だけ或るイベントを発生させ、かつul内部の各要素からマウスがoutされた時には、そのイベントを発生させないようにするにはどうしたらよいのでしょうか？ <ul id="t1" onmouseover="func1()" onmouseout="func2()"> <li class="level1">なんたらかんたら <ul id="t2"> <li class="level2">○○<a>△△</a></li> <li class="level2">××<a>▽▽</a></li> </ul> </li> <li class="level1">かんたらなんたら</li> <li class="level1">・・・・・・・・</li> </ul>
- ベストアンサー
- JavaScript
- liの並び順の変更
javascriptを使用してliの並び順の変更を考えています。 例) <ul class="c"> <li class="a">りんご</li> <li class="a">バナナ</li> <li class="b">トマト</li> <li class="a">カキ</li> </ul> 上記の様に複数のclassがaのliと1つだけのclassがbのliがあります。 class="b"が最後ではなかった場合、最後のliとその一個前のclass="b"のliを交換したいと考えています。 class="b"にはイベントが指定してありますので、削除して作り直しはできません。 この場合、最後の二つを入れ替えるロジックが良く分かりません。 javascriptコードでも、jqueryライブラリを使用してもどちらでも構いません。 if($(".c").find("li").filter(":last").attr('class') != 'b') でbかどうかの判定はできそうですが、その後の入れ替えが良く分かりません。 <ul class="c"> <li class="a">りんご</li> <li class="a">バナナ</li> <li class="a">カキ</li> <li class="b">トマト</li> </ul> とするにはどうすればいいでしょうか？ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- ｃｓｓでの擬似リンク（a:hover）の複数指定
cssでidに囲まれた範囲で複数リンクカラーを指定したいのですが、擬似リンク(a:hover)はうまく表現出来るのですが、その他のリンクの色の指定がうｋまく行きません。 FireFoxでは、きちんとスタイルが適用されるのですが、Ie6やNetScape7だと、a, a:link, a:visitedの文字色のスタイルが効かなくなります。どうしたらうまくできるのか教えてください。 ■css /* menu-1 */ #menu-1 { width: 200px; height: auto; margin: 0; padding:0; } #menu-1 ul.support, #menu-1 li.support { margin: 0; padding: 0; list-style: none; } #menu-1 li.support { width: auto; height: auto; padding: 5px 10px; } #menu-1 a, #menu-1 a:link, #menu-1 a:visited { padding: 0.2em 10px; height:1.4me; color: #ff0000; text-decoration: none; } #menu-1 a:hover { color: #9f0f0f; text-decoration: underline; } /* menu-2 */ #menu-2 { width: 200px; height: auto; } #menu-2 ul, #menu li.list1, #menu li.list2 { margin: 0; padding: 0; list-style: none; } #menu-2 ul li.list1, #menu-2 ul li.list2 { width: auto; height: auto; } #menu-2 ul li.list1 { font-weight: bold; } #menu-2 .list1 a, #menu-2 .list1 a:link, #menu .list1-s a:visited { text-decoration: none; color: #0e2159; } #menu-2 .list1 a:hover { color: #9f0f0f; text-decoration: underline; } #menu-2 li.list2 a, #menu-2 li.list2 a:link, #menu li.list2-s a:visited { text-decoration: none; color: #000000; } #menu-2 li.list2 a:hover { color: #9f0f0f; text-decoration: underline; } ■html <div id="menu-1"> <a href="#"> <ul> <li class="support">テスト</il> </ul> </a></div> <div id="menu-2"> <a href="#"> <ul> <li class="list1">スタイル１</il> <li class="list2">スタイル２</il> </ul> </a></div>
- ベストアンサー
- HTML
- cssとjavascriptでプルダウンメニュー
お世話になります。 いろいろとサンプルを試し、ハマっています・・・。どなたか助けてください！ 今下記のようなソースでメニューを作っています。 <ul id="globalnavi"> <li id="a"><a href="#">a</a></li> <li id="b"><a href="#">b</a> <ul id="subnav"> <li><a href="#">b-1</a></li> <li><a href="#">b-2</a></li> <li><a href="#">b-3</a></li> </ul> </li> <li id="c"><a href="#">c</a></li> </ul> このソースで、親階層のメニューは画像、submenuはテキストで表現したいのですが、FFやIE7、IE6、safariに使える方法でなにか簡単なものありましたら、教えていただきたいです。 よろしくお願い致します！
- 締切済み
- JavaScript
- onmouseoverの表示切り替えが上手くいかない
onmouseoverを使って、隠していた＜DIV＞を表示させたいと思っています。 ＜li＞にマウスが重なったら、その直前に表示させていた＜DIV＞を隠した上で、idに対応する＜DIV＞を表示させ、さらに＜H2＞に重なった場合にも隠す、という流れの処理を考えています。 firefoxのエラーコンソールでは「descriptionw0 is not defined」となって、動作しません。IEでもエラーになります。 どこかでミスをしてはずなのですが、どうやっても上手くできないので、知恵を貸していただけないでしょうか。よろしくお願いします。 -------------------------- javascript --------------------------- <script language="javascript"> <!-- var target = null; function mOver(t){ if(target!=null){ document.getElementByID(target).style.display = 'none'; } document.getElementByID(t).style.display = 'block'; target = t; } function mOut(){ if(target!=null){ document.getElementByID(target).style.display = 'none'; } target=null; } //--> </script> ---------------------------- HTML部分 ---------------------------- <div class="part"> <h2 class="title" onMouseover="mOut()">＊＊＊</h2> <ul class="article"> <li onMouseover="mOver(descriptionw0)"><a href="#">ＡＡＡ</a></li> <li onMouseover="mOver(descriptionw1)"><a href="#">ＢＢＢ</a></li> </ul> <div class="description" id="descriptionw0" style="display:none;">ａａａ</div> <div class="description" id="descriptionw1" style="display:none;">ｂｂｂ</div> </div>
- ベストアンサー
- JavaScript
- jqueryで要素の獲得方法
jqueryについてお聞きしたします。 下記のようなソースで <div class="sideBox"> <div class="sideBoxHead"> ・・・ </div> <div class="sideBoxInner basename"> <ul><li class="on"><span title="main title">aaa</span></li> <li><a href="html1" title="title1">bbb</a></li> <li><a href="html2" title="title2">bbb</a></li> ： ： <li class="last"><a href="htmlX" title="titleX">zzz</a></li> </ul></div> </div> "title2"をクリックした時の"html2"を獲得したいのですが $("div.sideBox > div > ul > li > a").click(function(){ var value = this.href; console.log("varlue = " + value); }); としても値が獲得できません。 直接"sideBoxInner basename"classからたどれば上手くいくような気がするのですが クラス名に半角スペースがある場合、どのようにすればいいのでしょうか？
- 締切済み
- JavaScript
- タブ切り替えの初期表示に関して
jQueryを使用したタブの切り替えを実装しています。 下記ソースに関して、デフォルトの状態ですとselectedを設定した <div id="#a">の内容を初期表示します。 別ファイルからのリンクの飛び先が#bの時は初期表示を<div id="#b">にしたいのですが どうすればよいでしょうか？ <ul id="tab"> <li class="selected"><a href="#a">a</a></li> <li><a href="#b">b</a></li> <li><a href="#c">c</a></li> </ul> <div id="#a"> aの内容 </div> <div id="#b"> bの内容 </div> <div id="#c"> cの内容 </div> 下記のスクリプトを使用しています。 http://hyper-text.org/archives/2007/09/javascript_tab.shtml
- ベストアンサー
- JavaScript
- IE以外で:hoverの内容が無視されてしまう
独学でCSSを勉強している者です。 ちょっと躓いてしまったのでどなたかお知恵を貸してください。 下記のように指定しています。 IE6ではちゃんとhover時に背景色が変わるのですが、 opera,firefoxで動作確認したところいずれもうまく動作しませんでした。 どこが間違っているのか分からず、困っています。 御指摘頂けると助かります。 ---------------- pagelist.htmlの内容 ---------------- <ul class="comout"> <li class="comrow compar">ページリスト <ul class="comin"> <li class="comrow"><a href="001.html">1</a></li> <li class="comrow"><a href="002.html">2</a></li> </ul> </li> </ul> ---------------- 001.htmlの内容 ---------------- <ul class="comout"> <li class="comrow compar">ページリスト <ul class="comin"> <li class="comrow comself"><a href="001.html">1</a></li> <li class="comrow"><a href="002.html">2</a></li> </ul> </li> </ul> ---------------- スタイルシート ---------------- ul.comout{ padding:0px; margin:0px 0px 20px 0px; } ul.comin{ padding:0px; margin:0px 0px 0px 10px; } li.compar{ display:block !important; padding:5px; margin:0px; } li.comrow{ display:inline; color:#395158; list-style-type:none; text-decoration:none; } li.comrow a:link{ background-color:#EFECE7; border:1px #D1C9BD solid; text-decoration:none; color:#395158; } li.comrow a:visited{ background-color:#EFECE7; border:1px #D1C9BD solid; text-decoration:none; color:#395158; } }li.comrow a:hover{ background-color:#D1C9BD; border:1px #EFECE7 solid; text-decoration:none; color:#395158; } li.comself a{ background-color:#D1C9BD !important; border:1px #EFECE7 solid !important; } --------------------------- 以上です。 いままでIEのみで動作確認をしてきたため、 今回のような自体にどう対応して良いのか分かりません。 よろしくお願いします。
- ベストアンサー
- HTML
- トナーカートリッジ TN-28J を使用している際に、レザープリントでの印刷に汚れや単線が紙に付着する問題が発生しています。
- ウェブサイトの掃除方法を試しましたが、効果がないため、トナーカートリッジの交換やドラムの交換が必要かどうかについてご相談したいです。
- 購入してから1年経っており、まだインクは残っています。この場合、交換は無償で行われるのでしょうか。お使いの環境についても教えてください。
補足
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> たびたびですみませんが、ご教授いただけるとうれしいです。 よろしくお願いします。