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

Question

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

1. 在 Photoshop 中使用文本叠加和降低不透明度制作复制图像。在鼠标悬停时将原件换成副本。
2. 使用 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 的用户可以获得吸引人的淡入淡出效果。