我正在使用此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;
    });
});


大多数人对此网站上的类似问题都没有回答,但我想请自己确保这是否可行。干杯!

最佳答案

尝试找出该功能的工作原理,这将在将来节省大量时间。
我看到您对相同的功能还有更多疑问,如果您已经知道它是如何工作的,那么就不需要所有这些了。

(对不起,如果您没有意识到,那真是太难了。因为对于StackOverflow上的所有其他问题,同样的道理也是如此!)

无论如何,诀窍是使外部div position:relative使得内部div位于同一位置。然后,您需要做的就是将它们放在中间,例如,将line-height设置为与图像高度相同的值。有了绝对定位,您就不需要z-index

产生的提琴here

09-30 16:02
查看更多