如何使用jquery在悬停时在淡入淡出的图像上显示文本

Question

我有一个在悬停时淡化不透明度的picturelink.我需要的是在它上面显示文本.这是我想要的一个例子: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我们可以在我们悬停时显示它.