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

Question

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

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

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

Answer 1

• 将图像包裹在<div class="thumb">
• 添加position: relative对于.thumb 。
• 在.thumb添加<div class="text> 。
• 添加display: none; position: absolute; bottom: 0 display: none; position: absolute; bottom: 0 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包装内容等，我建议您这样做 。 这是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'）显示.slideUp（）即。