- ベストアンサー
マウスオーバーにてdivの切り替え
htmlにてjavascriptを使い、ある一つのdiv(div1)にマウスオーバーすると、マウスオーバーしたdiv(div1)が消え、非表示になっていたもう一つのdiv(div2)を表示できるようにしたいです。 クリックでの切り替えは結構いろんなサイトで見つけたのですが、マウスオーバーでのdivの切り替えは中々見つかりませんでした。 もしかしてこれって無理なのでしょうか？ もしできるのならば、参考サイトなどを教えてもらえるとありがたいです
- katorasu
- お礼率36% (14/38)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
Google Chrome と Firefox でのみ動作を試してみました。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Q7279331</title> <script type="text/javascript"> window.onload = function() { div1 = document.getElementById("div1"); div2 = document.getElementById("div2"); div1.onmouseover = function() { div1.style.visibility = "hidden"; div2.style.visibility = "visible"; }; div1.style.visibility = "visible"; div2.style.visibility = "hidden"; }; </script> </head> <body> <div id="div1">段落１</div> <div id="div2">段落２</div> </body> </html>
その他の回答 (1)
- pasocom
- ベストアンサー率41% (3584/8637)
こんなんでいかが？ <script language="JavaScript"> function VIS(name1,name2){ document.all(name1).style.visibility="hidden"; document.all(name2).style.visibility="visible"; } </script> <body> マウスを当てるとそのレイヤが消えて別のレイヤが現れます。 <hr> <center> <div id="L1" style="position:relative;visibility:visible;;background-color:yellow;" onMouseover="VIS('L1','L2')"> これは（DIV1）です。 </div><br> <div id="L2" style="position:relative;visibility:hidden;;background-color:aqua;"> これは（DIV2）です。 </div> </body>
