Blogger

Question

我最近在为我的博客编写 'show text on hover image' 代码。当我用codepen写完后，开始在我的博客上测试，发现用codepen写的代码在Blogger中不能运行。我检查了大约 3 个小时的代码，我仍然找不到我的代码有什么问题。

实时页面（代码不起作用）：http://ll5555.blogspot.com/p/test.html
codepen 中的代码（代码工作正常的地方）：

$(".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>

Answer 1

您的 .title 元素（跟随光标）正在使用 position: absolute 属性定位在页面上，该属性偏移像素 "at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block" (source)。

在您的博客页面上，parent 元素之一 (.post-body) 设置了 position: relative;，这就是为什么与您的 CodePen 相比坐标 "off"。您只需要做数学运算来相应地调整该元素的位置，或者在您放置 position: relative 的更近的 child 上。

Answer 2

问题终于解决了，好乱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>

Blogger - 悬停图像上显示的文本偏移并且与计算结果不同

Blogger - displayed text on hover image is offset and differ from calculation

javascript

css

jquery

offset