我使用此 JQuery 作为悬停功能来在我的客户网站上显示特色缩略图。但是,文本显示在图像上或距离图像太远。我希望它位于图像的正下方。这是我需要使用 CSS 或 JW 进行更改来完成的事情
function myFunction() {
var $large = jQuery('#largeImage');
//store the default image as the data src
//$large.data('src', $large.attr('src'));
var src = jQuery('#largeImage').attr('src');
jQuery('#thumbs img').hover(function () {
$large.attr('src', jQuery(this).attr('src').replace('thumb', 'large'));
var altText =jQuery(this).attr("alt");
//alert(jQuery(this).parent().text());
var existsClass=$large.parent().children().hasClass("prodName");
//alert(existsClass);
if(existsClass)
//$large.parent().children().remove(".prodName");
$large.parent().find("div").remove();
$large.parent().append('<div class="prodName" style="margin-left:220px">'+jQuery(this).parent().text()+'<br/>'+altText+'</div>');
}, function () {
//on mouse leave put back the original value
$large.attr('src', $large.data('src'));
});
}
jQuery(document).ready(function () {
jQuery(myFunction);
});
以下是网页 URL 的示例。 http://test.pillarsoflifebook.com/ottomans/
将鼠标悬停在 CrissCross 和 Cambridge Ottomans 上时,您可以看到文本覆盖在实际图像上。对于其他产品,文本就在下面。我希望文本始终生成在图像本身下方,而不必担心实际图像大小。有什么建议吗?
最佳答案
悬停时尝试执行此操作
jQuery('.prodName').css('margin-top', jQuery('#largeImage2').height())
关于JQuery 函数将产品名称和图像 Alt 文本放置在特色图像下,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22470246/