こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

javascriptでボックスの表示非表示

javascriptでボックスにマウスオーバーすると、同じ位置に別のボックスを表示させたいと考えています。
以下のようにしてみましたが、ie9ではできたのですが、
ie6、ie7、ie8ではdiv1とdiv2が横に並んでしまいました。

何か解決方法があれば教えてください。
よろしくお願いいたします。

<script type="text/javascript">
window.onload = function() {
div1 = document.getElementById("div1");
div2 = document.getElementById("div2");
div1.onmouseover = function() {
div1.style.display = "none";
div2.style.display = "block";
};
div2.onmouseout = function() {
div1.style.display = "block";
div2.style.display = "none";
};
div1.style.display = "block";
div2.style.display = "none";
};
</script>

<div id="div1" class="box01">
<div id="pic"><img src="image01.gif"></div>
<div id="txt">てきすとてきすと</div>
</div>
<div id="div2" class="box02">
<div id="pic"><img src="image02.gif"></div>
<div id="txt">てきすとてきすと</div>
</div>

投稿日時 - 2013-02-24 16:45:47

QNo.7962273

すぐに回答ほしいです

質問者が選んだベストアンサー

試していないので読んだ限りの印象ですが、イベント対象にするDOMに問題がある気がします。
div#1とdiv#2の親要素にmouseoverとmouseoutイベントを設定したほうが確実かと。


<div id="parent">
 <div id="div1">・・・・</div>
 <div id="div2">・・・・</div>
</div>

----
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var parent = document.getElementById("parent");

parent.mouseover=・・・
parent.mouseout=・・・

投稿日時 - 2013-02-24 17:09:50

お礼

ありがとうございます!教えていただいた方法でできました!

投稿日時 - 2013-02-24 23:52:28

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問