Question

当我将鼠标悬停在缩略图上时，我想删除不透明度和叠加文字。我有几个关于如何做的想法，但我相当肯定他们效率低下且笨拙。

使用文本叠加层和降低的不透明度在Photoshop中制作复制图像。鼠标悬停时将原件换成副本。
使用CSS在鼠标悬停时删除不透明度。使用Javascript切换包含叠加文字的div的可见性。

我看到1的问题是它似乎是不必要地使用空间和带宽，并且会导致加载时间变慢。使用2，似乎我必须在每个div的位置进行硬编码，这对维护和更新来说是一种痛苦。我知道这是一个有点普遍的问题，但我对如何解决这个问题感到茫然。如何以一种易于添加新缩略图的方式完成这项相对简单的任务？

Answer 1

将图片包裹在<div class="thumb">
将position: relative添加到.thumb。
在<div class="text>内添加.thumb。
将display: none; position: absolute; bottom: 0添加到.text。
使用.thumb:hover .text { display: block }在悬停时显示文字。

像这样：http://jsfiddle.net/dYxYs/

您可以使用一些JavaScript / jQuery增强此功能：http://jsfiddle.net/dYxYs/1/

$('.text').hide().removeClass('text').addClass('text-js');

$('.thumb').hover(function(){
    $(this).find('.text-js').fadeToggle();
});

这样，基本效果在没有JavaScript的情况下仍然有效，而使用JavaScript的用户可以获得吸引人的淡入淡出效果。

Answer 2

使用选项2.有一些方法可以不必为每个图像编写jQuery函数。正如我的jsfiddle所见。

http://jsfiddle.net/daybreaker/dfJHZ/

HTML

<img src="http://placekitten.com/300/300" />
<span class="text" style="display:none">THIS IS A KITTEN</span>
<br><br>
<img src="http://placekitten.com/200/200" />
<span class="text" style="display:none">THIS IS A KITTEN</span>

的jQuery

$('img').mouseover(function(){
    $(this).css('opacity','.2');
    $(this).next('span.text').show();
}).mouseout(function(){
    $(this).css('opacity','1');
    $(this).next('span.text').hide(); 
});

你需要修改span.text css以将其叠加在图像上，但这不应该太糟糕。

Answer 3

将其包裹在元素中并执行以下操作：

var t;
$('div.imgwrap img').hover(function(){
   t = $('<div />').text($(this).attr('title')).appendTo($(this).parent()); 
    $(this).fadeTo('fast',0.5);
},function(){
     $(this).fadeTo('fast',1);
    $(t).remove();
});

标记类似于：

<div class="imgwrap">
    <img src="http://www.gravatar.com/avatar/3d561d41394ff0d5d0715b2695c3dcf0?s=128&d=identicon&r=PG" title="text" />
</div>

示例：http://jsfiddle.net/niklasvh/Wtr9W/

Answer 4

这是一个例子。您可以根据需要定位文本，但下面是基本原则。

http://jsfiddle.net/Xrvha/

#container { position: relative; }

#container img, #container div {
    position: absolute;
    width: 128px;
    height: 128px;
}

#container img { z-index -1; }
#container div { 
    z-index 1; 
    line-height: 128px;
    opacity: 0;
    text-align: center;
}

#container:hover img {
    opacity: 0.35;
}
#container:hover div {
    opacity: 1;
}

Answer 5

如果您不想更改HTML包装内容等，我建议您this way。这是jQuery：

$(function() {
    $(".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.0);
        });
    });
});

Answer 6

2是一个很好的解决方案，与此完全相同，并没有你想要的那么难;

确实使用css删除不透明度，而不是相对于img定位div，并将其放在上面。它可以用普通的CSS来完成。 z-index就是诀窍。这个div只能用$（'＃div'）显示.slipUp（）即。

在鼠标悬停时，更改图像的不透明度并覆盖文本

6 个答案: