我正在使用此Jquery函数,因此使用html中的关联alt标记在图像上方显示标题。我希望能够设置显示的文本样式,并且想知道是否有办法执行此操作。这是我正在使用的代码。
$(function () {
var show = false;
$(".thumb").mouseenter(function () {
var $t = $(this);
var $d = $("<div>");
$d.addClass("desc").text($t.attr("alt")).css({
width: $t.width(),
height: $t.height() - 20,
top: $t.position().top
});
$t.after($d).fadeTo("fast", 0.3);
$d.mouseleave(function () {
$(this).fadeOut("fast", 0, function () {
$(this).remove();
}).siblings("img.thumb").fadeTo("fast", 1.3);
});
});
$('#caption-toggle').click(function() {
if (!show) $('.thumb').trigger('mouseenter');
else {
$('.thumb ~ div').fadeOut("fast", 0, function () {
$(this).remove();
}).siblings("img.thumb").fadeTo("fast", 1.0);
}
show = !show;
});
});
大多数人对此网站上的类似问题都没有回答,但我想要求自己确定这是否可行。干杯!
答案 0 :(得分:0)
尝试了解该功能的工作原理,这将为您节省大量时间。 我发现你对同一个功能有更多的疑问,如果你已经知道它是如何运作的话,这些都不是必需的。
(对不起,如果你没有意识到,那就是脸颊。因为StackOverflow上的其他问题也是如此!)
无论如何,诀窍是使外部div position:relative
使内部div位于同一位置。然后,您需要做的就是将它们放在中间,例如将line-height
设置为与图像高度相同的值。使用绝对定位,您将不需要z-index
。
结果小提琴here