onMouseOver、onMouseOutイベントにて

質問

質問させていただきます。
GoogleMapでリストに表示されている建物名の上に
マウスカーソル乗せると、
その場所をマーカーで表示させ、
マウスをリストから外すとマーカーが消える、
という機能を作成しようとしています。
マーカーを表示したり消したりは出来るようになったのですが
動きが非常にぎこちないです。
調べてみると
リンクでOnMouseイベントを発生させているタグの
<a>～</a>の間に<div></div>などが間に入ると動きが
ぎこちなくなることがわかりました。
普通に動く場合
<a harf="#" onMouseOver="・・・・" onMouseOut="・・・・">
建物名<br>
　　住所
</a>

ぎこちなく動く場合
<a harf="#" onMouseOver="・・・・" onMouseOut="・・・・">
<div class="***1">建物名</div>
<div class="***2">住所</div>
</a>
どうも良い時はマウスカーソルが建物名と住所名を移動しても
反応しない。
ぎこちない場合、建物名から住所名にマウスカーソルが移動する
度に反応している。
ＣＳＳを使用しているため、なるべく<div>タグは外したくない。
何かいい方法が無いでしょうか？
もし何かわかる方がいたら、ご教授お願いします。
何処に書いていいかわかりませんでしたが
多分ここが一番あってるかなと思ったので書かせていただきました。

回答No.2

神崎 渉瑠（@taloo） · ベストアンサー

HTMLの文法違反は直しておく方が良いと思います。
HTMLの文法上インライン要素の中にブロック要素は入れられませんので、a.childNodesやa.innerHTMLなどでの処理に影響します。

onmouseover/onmouseoutは、子要素にカーソルを移動させてもonmouseout、onmouseoverイベントが発生します。
そのイベントの発生場所から親要素を順に調べていって、
onmouseoverをセットした要素に入っているかどうかをチェックする必要があります。

ただしこのままでは文法違反の為、
入れ子になっている<div>のonmouseoverイベントでも<a>の外にあると見なされるかもしれません。

JScriptに onmouseenter と onmouseleave というのがあります。
onmouseover、onmouseoutと違うのは、入れ子になった要素にカーソルが重なったときにonmouseleaveイベントが発生しない、
入れ子になった要素から親要素にカーソルを移動したときにonmouseenterイベントが発生しないという違いがあります。

IE4以上で使えますが、もしかするとSafari3以上でも使えるかも知れません。
Firefox、Operaその他で使えないので現実的ではないと思いますが。。。

お礼

丁寧にありがとうございます。
onmouseenter と onmouseleaveですか、試してみます。
ありがとうございました。

回答No.1

steel_gray

まず、Anchorの中にdivってのは文法違反、
表示がおかしくなるブラウザがあるかもしれないしやめたほうがいい。
（実際に古いMac版IEではおかしくなった、今時のブラウザでどうかは知らない）
内側のdiv→spanにするとか
リンクでないなら外側のAnchor→divにするとか。

onmousuoverやonmouseoutの反応がおかしいのは、
入れ子の外側にだけonmouseoverやonmouseoutを指定してるから。
イベントの特性・取り扱いを理解してきちんと書こうとすると大変（というか私にその能力がない）ので、
とりあえず入れ子をやめるのをススメておく。

お礼

ありがとうございます。
文法違反があったのですね。
入れ子はよくないのはわかりました。