innerHTMLに入れたリンクが反応しない

質問

どのジャンルで質問しようか迷ったのですが、ここでお願いします。

次のようにしてマウスオーバーした時にリンクが現れるようにしたのですが、
たしかにyahooのリンクは現れたのですが、クリックしても反応がありません・・・
どうすればリンクを機能させることができるのでしょうか？

<STYLE TYPE="text/css">
<!--
DIV.sample {
　background-color:#FFFFFF;
　position: static;
　display:'block';
}
-->
</STYLE>
<SCRIPT language="JavaScript"><!--
function do_sample(){
　document.getElementById('sample').innerHTML = "<a href=http://www.yahoo.co.jp>yahoo</a>";
}
// --></SCRIPT>

<div id="sample" class="sample" onMouseOver="do_sample()">ココ</div>

回答No.3

steel_gray · ベストアンサー

要素が入れ子になっている部分でonmouseover,onmouseoutを使うとややこしい（上位でのイベント処理が下位層でのイベントの発生を邪魔する）のでこうしました。
マウスを乗せるまでリンクに見せたくないとかであればCSSで解決してはどうでしょう。

function do_sample(){
var Sample = document.getElementById('sample');
Sample.onmouseover='';
Sample.onmouseout=out_sample;
Sample.innerHTML = 'yahoo';
}
function out_sample(){
var Sample = document.getElementById('sample');
Sample.onmouseover=do_sample;
Sample.onmouseout='';
Sample.innerHTML = 'ここ';
}

<div><a href="http://www.yahoo.co.jp" id="sample" onmouseover="do_sample()">ココ</a></div>

お礼

ご返答ありがとうございます。
理想とする結果になり満足しています。ありがとうございました。

回答No.2

leap_day

こんにちは

onMouseoverをずっとやっているような感じ？（理由はよくわからないです）だと思うので別にしてみたらいい
試しにonClick使ってみたのですが文字部分はクリック効きませんでしたので・・

<div id="sample" class="sample">
<a href="" onMouseOver="do_sample()">ココ
</a>
</div>

お礼

ご返答ありがとうございます。
なるほど、このやり方でもできました。
そこでleap_dayさんにも#1の再質問を考えていただけないでしょうか？
お願いします。

回答No.1

steel_gray

innerHTMLで内容を書き換ても、onmouseoverが効くので
うまく動作しないのでは。

一度書き換えたらそれっきりなら
function do_sample(){
　document.getElementById('sample').innerHTML = ～;
　document.getElementById('sample').onmouseover='';//追加
}
と、でもしてonmouseoverを無効化してしまってはどうでしょう。

お礼

ご返答ありがとうございます。
たしかにリンクが効きました。
そこで追加で申し訳ないのですが、マウスをその場所から外したら
また「ココ」に戻すやり方はどのようになるか分かりますか？
つまり
マウスオーバーしたら→ヤフーリンク（クリックできる）
マウスアウトしたら→ヤフーリンクが消え、ココが現れる
という状態です。
onMouseOutを使うと思うのですが、次のようにやったのですがうまくいきませんでした・・・

<STYLE TYPE="text/css">
<!--
DIV.sample {
　background-color:#FFFFFF;
　position: static;
　display:'block';
}
-->
</STYLE>
<SCRIPT language="JavaScript"><!--
function do_sample(){
　document.getElementById('sample').innerHTML = "<a href=http://www.yahoo.co.jp>yahoo</a>";
　document.getElementById('sample').onmouseover='';//追加
}
function out_sample(){
　document.getElementById('sample').onmouseover='do_sample()';
　document.getElementById('sample').innerHTML='';
}
// --></SCRIPT>

<div id="sample" class="sample" onMouseOver="do_sample()" onMouseOut="out_sample()">ココ</div>