jqueryがchromeだと動かない

Question

画像にareaを指定し、その上にマウスが来ればマウスの横にポップアップが表示プログラムを作ろうとしているのですが、chromeとEdgeではポップアップの表示される位置がおかしくなります。（表示されないと言っていたのは、ただポップアップが画面外で表示されていたためでした）
cssのpositionを変えたり、jqueryの数値を変更したりしました。しかし、chrome上ではマウスの横にポップアップが表示されても、Edge上では画面外で表示されたり、意図しない場所で表示されたりします。また、Edgeに合わすとchromeがおかしくなります。
chrome,EdgeではPCの画面の座標がかわるものなんですか？
chrome上でも、Edge上でも、ポップアップが同じ場所に表示することはできますか？
なんども聞いてすみません。
よろしくお願いします。

$(function() {
  // ポップアップ表示
  $('.city').hover(function(event) {
    $('.popup').css({
      'left': event.offsetX + 150 + 'px',
      'top': event.offsetY - 150 + 'px'
    });
    $('.popup').show();
  }, function() {
    $('.popup').hide();
  });

コード
.popup {
  display: none;
  position: absolute;
  width: 20%;
  height: 30%;
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
}

コード
　　<div class='map'>
      <img id="map" src="japan.png" usemap="#image-map">
      <map name="image-map">
          <area class="city" coords="コードの数字が多く見ずらいので消しました"shape="poly">
          <area class="city" coords=""shape="poly">
          <area class="city" coords="" shape="poly">
      </map>

      <!-- ポップアップ -->
      <div class="popup">
        <div class="place">〇〇の場所</div>
        <img src="city.png"><br>
      </div>
    </div>

Comments

[退会済みユーザー]

日本語の表現に注意してください。うまく表示されないとはどういうことでしょうか？？全く表示がされないのか、表示がされるけど想像とは違うのか。jqueryのコードだけだと判断でき兼ねますのでhtmlのコードも記載してください。余力があればjsFiddleを使用して動くサンプルが有れば良い解決策が導き出せるかと思います。

[nyanryou]

全く表示できませんです。htmlをついかしました。使い方がまだよくわからないので見づらいかもしれません

[nyanryou]

質問の仕方が悪かったです。申し訳ございません。

[nyanryou]

offsetの部分を変更すると表示することはできましたが、画面下に表示されました。

[m.ts10806]

htmlのほうもコードブロック```で囲ってください。コードブロックは1つだけでなく任意の数設置することができます。

[m.ts10806]

要件部分は大切なので質問本文に追記してください。ここのコメント欄はデフォルト非表示なので目につきにくいです。

[nyanryou]

使い方を教えていただきありがとうございます。直します！

[x_x]

coordsとCSSとを補って確認してみましたが、特にIEとChromeとで違いは見られませんでした。再現するコードをお願いします。

[nyanryou]

すみません。ほかの型も言っているとおり、かなり説明不足かつ不鮮明な部分が多い気がします。付け足したいと思います。

[退会済みユーザー]

jqueryのコードは全文をコピペしてますか一部分をコピペしてますか？？？ ネスト構造が間違っているので、構造の正しいコードに直してください。

[x_x]

問題が起こりません。CSSをすべて記述してもらえるでしょうか？

[nyanryou]

お騒がせしました。あるページを参考すると思っていた通りの動作をしました。ありがとうございました。

Answer 1

大変おさわがせしました。
アドバイスくださった方々ありがとうございます。
もっとよく調べてみると、よく似たコードを書いている方がいらしたので、そちらを参考に変更してみると、意図したとおりの動作をしました。たぶん、jqueryのネスト構造が間違っていると指摘されておりましたので、そのため意図した動作をしなかたのではないかとおもいます。

コード
$('.city').hover( function(){
  $(".popup").show();
},function(){
  $(".popup").hide();
});
$(function() {
  // ポップアップ表示
  $('.city').hover(function() {
    function MouseMoveFunc(e){
      var mouse_x=e.clientX-300;
      var mouse_y=$(window).scrollTop()+e.clientY-200;

      $('.popup').css({
        'position':'absolute',
        'left' :  mouse_x,
        'top' : mouse_y
      });
    }
    if(document.addEventListener){
			document.addEventListener("mousemove" , MouseMoveFunc);
		}else if(document.attachEvent){
			document.attachEvent("onmousemove" , MouseMoveFunc);
		}
  });

こちらを参考しさせていただきました。
https://www.weblab.co.jp/staff/html/5209.html