博客 - 懸停圖片上顯示的文字偏移並與計算不同

我最近在爲我的博客撰寫「懸停圖片的展示文字」代碼。在我用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>

來源

2016-11-30 Louis55

爲什麼不能抵消你的'top'位置，以彌補在Blogger？ – 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）。

在您的博客頁面上，其中一個父元素（.post-body）有position: relative;集合，這就是與您的CodePen相比座標「關閉」的原因。您只需執行數學運算即可針對該元素相應地調整位置，或者在您放置position: relative的更仔細的小孩身上調整位置。

來源

2016-11-30 21:29:30

感謝您的提示，我找到了解決方案。 – Louis55

博客 - 懸停圖片上顯示的文字偏移並與計算不同

回答

相關問題