- ベストアンサー
onmouseoverで要素の表示切り替えが上手くいかない
- onmouseoverを使って、要素を表示させる方法について質問があります。
- firefoxのエラーコンソールでエラーが出ており、動作しない状況です。
- どこかでミスがあるかと思いますが、解決策を教えていただきたいです。
- george2000
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Q3771048 TestCase 1</title> <script type="text/javascript"> //<![CDATA[ //個人的には<!--によるコメントアウト嫌いです。デクリメント書けないし。 //その他、Ecmascriptを理解しないUAには何も補足が表示されないが //それはいいのか？ //(当方環境の都合上，IEではテストしてない) var target = null; function mOver(t){ if(target!=null){ document.getElementById(target).style.display = 'none'; /* Ecmascriptは大文字小文字を区別する。正しくはgetElementById*/ } document.getElementById(t).style.display = 'block'; target = t; } function mOut(){ if(target!=null){ document.getElementById(target).style.display = 'none'; } target=null; } //]]> </script> </head> <body> <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> </body> </html>
お礼
himajin100000さん、回答ありがとうございます。 指摘された修正点を反映させたところ、IEとfirefoxで表示することができました。 ダブルクオテーションとシングルクオテーションの使い方を、きちんと理解できていませんでした。（getElementByIdは論外ですね。） javascript未対応ブラウザについては別途CSSで対応したいと思います。 ずっとこの問題について悩んでいたので、スッキリしました。 本当にありがとうございました。