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

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的用户可以获得吸引人的淡入淡出效果.