javascript - 如何使用 jquery 在悬停时在褪色图像上显示文本

Question

我有一个图片链接，可以在悬停时淡化不透明度。我需要的是在其上显示文本。这是我想要的示例: http://kspla.tumblr.com/ 我下面的代码将不透明度降低到 40%，但我不知道如何让文本显示在它上面。

<script type="text/javascript">

$(document).ready(function() {
    $('#wb_Image2, #wb_Image3 a img').animate({
        opacity:1
    
    });
    
    $('#wb_Image2, #wb_Image3 a img').hover(function() {
        $(this).stop().animate({opacity:.4},200);
    
    }, function() {
        $(this).stop().animate({opacity:1},500)
    
    });


});

提前致谢。

Answer 1

最好记住，如果您要处理事物的外观，很可能应该在 CSS 中完成(从长远来看，这会让您的生活更轻松)。

我在这里模拟了一个例子:http://jsfiddle.net/HAcE2/

您基本上需要创建一个在悬停时出现的框。通过使用 position:absolute 可以让框出现在顶部，使用 CSS 我们可以让它在我们悬停时出现。