質問させていただきます。
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>
どうも良い時はマウスカーソルが建物名と住所名を移動しても
反応しない。
ぎこちない場合、建物名から住所名にマウスカーソルが移動する
度に反応している。
CSSを使用しているため、なるべく<div>タグは外したくない。
何かいい方法が無いでしょうか?
もし何かわかる方がいたら、ご教授お願いします。
何処に書いていいかわかりませんでしたが
多分ここが一番あってるかなと思ったので書かせていただきました。
No.2ベストアンサー
- 回答日時:
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
- 回答日時:
まず、Anchorの中にdivってのは文法違反、
表示がおかしくなるブラウザがあるかもしれないしやめたほうがいい。
(実際に古いMac版IEではおかしくなった、今時のブラウザでどうかは知らない)
内側のdiv→spanにするとか
リンクでないなら外側のAnchor→divにするとか。
onmousuoverやonmouseoutの反応がおかしいのは、
入れ子の外側にだけonmouseoverやonmouseoutを指定してるから。
イベントの特性・取り扱いを理解してきちんと書こうとすると大変(というか私にその能力がない)ので、
とりあえず入れ子をやめるのをススメておく。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- PHP アップロードファイルの数に応じてCSSを動的に変更したいのですが、方法がわかりません 3 2023/07/23 21:59
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- JavaScript 指定したパスが現URLに含まれていたら特定要素を削除するJavascriptのコードを教えてください 2 2023/04/27 17:58
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS サルワカさんの吹き出しのスタイルシートについて。 https://saruwakakun.com/h 2 2022/10/28 22:55
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
googlemapで複数条件絞り込みで...
-
ホームページの案内地図をマッ...
-
入力した住所の画面内でグーグ...
-
VBAでオブジェクトがありません...
-
Yahoo地図でマーカーを表示した...
-
既存のgoogleマップに半径表示...
-
GOOGLEマップのマイマップでマ...
-
Google マップにマーカーと同心...
-
マイページはどこを開くの
-
ウインドウを毎回同じ位置、大...
-
スクリプトって、何ですか?ど...
-
エクセルのシート上に別のシー...
-
デジタル時計の時刻合わせの方...
-
Javascript_submit()完了後に処...
-
小さな表示窓の呼び方は
-
一定時間おきにアラームやポッ...
-
同じページをブラウザで複数開...
-
[Java] Edgeでのアドレスバー非...
-
リストビューをスクロールさせ...
-
Excelでワードアートや図を常に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Yahoo地図でマーカーを表示した...
-
VBAでオブジェクトがありません...
-
WordのVBAについて
-
googlemapで複数条件絞り込みで...
-
【javascript】住所から郵便番...
-
GoogleMapお店の情報をJSONで取...
-
Google maps API 吹き出しに画像
-
GMap Api V3で中心マーカーを表...
-
Google Maps APIのfitBounds
-
ホームページビルダー16 地図...
-
GoogleMap クリックで情報ウィ...
-
google map apiを使って自宅周...
-
Yahoo地図で郵便番号からおおよ...
-
ワードプレスのプラグインであ...
-
グーグル地図を改造しましてエ...
-
ビルダーの黄色マーカーの出し方
-
Google Map APIに関して
-
Google Map Api 複数のマーカ...
-
GoogleMapsAPIのルート案内につ...
-
Google マップにマーカーと同心...
おすすめ情報