0
Я недавно написал код для показа моего текста на hover image. После того, как я закончил писать его в кодефене и начал тестировать его в своем блоге, я обнаружил, что код, написанный в кодефе, не работает в Blogger. Я просмотрел код около 3 часов, но до сих пор не могу узнать, что не так с моим кодом.
Живая страница (где код не работает): http://ll5555.blogspot.com/p/test.html
Код в codepen (где код работает отлично):Blogger - отображаемый текст на изображении hover смещен и отличается от расчета
$(".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>
Почему бы не компенсировать ваши 'top' позицию для компенсации на Blogger? – Daerik
У блоггеров есть много тегов div, трудно найти элемент, который 'title' использует для ссылки/позиционирования его абсолютной позиции относительно этого элемента. Эта сиитуация выглядит так, будто я должен отказаться от кода, который я потратил на полдня. : | – Louis55
Я хочу сказать, что он отлично подходит к курсору. Просто смещайте туровую позицию 'top'. – Daerik