Blogger - ホバーイメージに表示されるテキストがオフセットされて計算と異なる

最近、私のブログの「ホバーイメージの表示テキスト」コードを書いていました。私はそれをcodepenで書き終え、自分のブログでテストを開始した後、私はcodepenで書かれたコードがBloggerで動作しないことを発見しました。コードを3時間ほど見直しましたが、私のコードで何が間違っているかはまだ分かりません。

ライブページ（コードが動作しない場合）：codepenでhttp://ll5555.blogspot.com/p/test.html
コード（コードが正常に動作します）：次のBlogger - ホバーイメージに表示されるテキストがオフセットされて計算と異なる

$(".hptable img").attr('class', 'gthumb'); 
 
$(".hptable td").hover(function() { 
 
    $.title = $(this).children().attr('title'); 
 
    if (typeof $.title !== typeof undefined && $.title !== false) { 
 
    $.title = $.title.replace(/\n/, "<br />"); 
 
    $(this).children().after("<div class=title>" + $.title + "</div>"); 
 
    $(this).children().removeAttr('title'); 
 
    } 
 
    $(this).children().next("div.title").show(); 
 
}, function() { 
 
    $(this).children().next("div.title").hide(); 
 
}); 
 
$(".hptable tr td").mousemove(function(e) { 
 
    var width = $(this).children().next('div.title').width(); 
 
    var height = $(this).children().next('div.title').height(); 
 
    $(this).children().next("div.title").css("top", e.pageY - height); 
 
    $(this).children().next("div.title").css("left", e.pageX - width/2); 
 
});

.hptable { 
 
    text-align:center; 
 
} 
 
.hptable td:hover:not(.v):not(.h) { 
 
    background-color: #CEE9FF; 
 
    cursor: pointer; cursor: hand; 
 
} 
 
.cell { 
 
    vertical-align: middle; 
 
    width: 176px; 
 
    max-width: 177px; 
 
    height: 176px; 
 
    max-height: 177px; 
 
    text-align: center; 
 
    border: 1px solid #87CEEB !important; 
 
    background-color: #D9F9FF; 
 
} 
 
.hptable img { 
 
    vertical-align:middle; 
 
    max-width: 175px; 
 
    max-height: 175px; 
 
} 
 
.hptable .h { 
 
    height: 30px; 
 
} 
 
.hptable .v { 
 
    width: 30px; 
 
} 
 
.title { 
 
position: absolute; 
 
text-align: center; 
 
vertical-align: middle; 
 
width:auto; 
 
height:auto; 
 
display:none; 
 
color: white; 
 
font-size: large; 
 
font-weight: bold; 
 
text-shadow: 
 
1px 1px 0 #000, 
 
0 0 2px #5F84CE, 0 0 3px #4C6AA5; 
 
white-space: nowrap !important; 
 
} 
 
.hptable tr td, .hptable tr, .label:before, .label:after { 
 
    -webkit-transition: all 1.5s; 
 
    -moz-transition: all 1.5s; 
 
     -o-transition: all 1.5s; 
 
      transition: all 1.5s; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<div style="padding: 50px;"> 
 
<hr/><h1>GAME SHARE</h1><hr/> 
 
<table class="hptable"> 
 
<tr> 
 
<td class="null h"></td> 
 
</tr><tr> 
 
<td class="null cell"> 
 
<img src="http://i.imgur.com/AcqrCtG.png" title="機動戦士ガンダム ガンダムVS.ガンダムNEXT PLUS 
 
Gundam vs. Gundam NEXT PLUS" /> 
 
</td></tr></table> 
 
</div>

出典

2016-11-30 Louis55

なぜブロガーに補償するあなたの 'top'位置をオフセットしませんか？ – Daerik

ブロガーにはdivタグがたくさんありますが、 'title'がその要素に対する相対位置を参照/配置するために使用している要素を見つけるのは難しいです。この状況は、私が半日を費やしたコードをあきらめる必要があるように見えます。：| – Louis55

私が言っていることは、それがうまくカーソルに従っているということです。ツアートップの位置をオフセットするだけです。 – Daerik

最後に解決された問題は、jQueryで何が混乱しているのでしょうか。
Bloggerでコードを使用すると、違いがわかります。画像をホバリングすると、コードは基本的に現在の<div class="titles">...</div>を末尾に<body>...</body>にスローします。イメージをホバリングしなくなると、divタグが元の場所に戻されます。
小さなメモ：マウスを早く動かすことはできません。そうでなければ、divタグは消えます。

$(".hptable img").attr('class', 'gthumb'); 
 
$(".hptable tr td:not(.v):not(.h)").hover(function() { 
 
    $.title = $(this).children().attr('title'); 
 
    if (typeof $.title !== typeof undefined && $.title !== false) { 
 
    $.title = $.title.replace(/\n/, "<br />"); 
 
    $(this).children().after("<div class=titles>" + $.title + "</div>"); 
 
    $(this).children().removeAttr('title'); 
 
    } 
 
    $(this).children().next("div.titles").appendTo($("body")); 
 
    $(".titles:last").show(); 
 
}, function() { 
 
    $(".titles:last").hide(); 
 
    $(".titles:last").appendTo($(this)); 
 
}); 
 
$(".hptable tr td:not(.v):not(.h)").mousemove(function(e) { 
 
    var width = $(".titles:last").width(); 
 
    var height = $(".titles:last").height(); 
 
    var widths = $(this).parent().parent().parent().position().left; 
 
    var heights = $(this).parent().parent().parent().position().top; 
 
    $(".titles:last").css("top", e.pageY - height - 10); 
 
    $(".titles:last").css("left", e.pageX - width/2); 
 
});

.hptable { 
 
    text-align:center; 
 
} 
 
.hptable td:hover:not(.v):not(.h) { 
 
    background-color: #CEE9FF; 
 
    cursor: pointer; cursor: hand; 
 
} 
 
.cell { 
 
    vertical-align: middle; 
 
    width: 176px; 
 
    max-width: 177px; 
 
    height: 176px; 
 
    max-height: 177px; 
 
    text-align: center; 
 
    border: 1px solid #87CEEB !important; 
 
    background-color: #D9F9FF; 
 
} 
 
.hptable img { 
 
    vertical-align:middle; 
 
    max-width: 175px; 
 
    max-height: 175px; 
 
} 
 
.hptable .h { 
 
    height: 30px; 
 
} 
 
.hptable .v { 
 
    width: 30px; 
 
} 
 
.titles { 
 
position: absolute; 
 
text-align: center; 
 
vertical-align: middle; 
 
width:auto; 
 
height:auto; 
 
display:none; 
 
color: white; 
 
font-size: large; 
 
font-weight: bold; 
 
text-shadow: 
 
1px 1px 0 #000, 
 
0 0 2px #5F84CE, 0 0 3px #4C6AA5; 
 
white-space: nowrap !important; 
 
} 
 
.hptable tr td, .hptable tr, .label:before, .label:after { 
 
    -webkit-transition: all 1.5s; 
 
    -moz-transition: all 1.5s; 
 
     -o-transition: all 1.5s; 
 
      transition: all 1.5s; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<div style="padding: 50px;"> 
 
<hr/><h1>GAME SHARE</h1><hr/> 
 
<table class="hptable"> 
 
<tr> 
 
<td class="null h"></td> 
 
</tr><tr> 
 
<td class="null cell"> 
 
<img src="http://i.imgur.com/AcqrCtG.png" title="機動戦士ガンダム ガンダムVS.ガンダムNEXT PLUS 
 
Gundam vs. Gundam NEXT PLUS" /> 
 
</td></tr></table> 
 
</div>

出典

2016-12-01 01:30:40 Louis55

あなた.title要素（カーソル）は、position: absolute属性を持つページに配置されています。この属性は、ピクセルが最も近い位置にある祖先（指定された位置にある場合）をオフセットします。（source）に移動します。

ブロガーページでは、親要素の1つ（.post-body）にposition: relative;が設定されています。その理由は、あなたのCodePenに比べて座標が「オフ」になっているからです。あなたはその要素に応じて位置を調整するために数学をやる必要があります。つまり、より近い子供にposition: relativeを置くだけです。

出典

2016-11-30 21:29:30

チップをありがとう、私は解決策を見つけた。 – Louis55

Blogger - ホバーイメージに表示されるテキストがオフセットされて計算と異なる

答えて

関連する問題