如何使用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，我们可以让它出现当我们悬停在。

Answer 2

将text设置在span或div中，并将absolutely与相对位置的容器对应。

然后hide或show对应的文本

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

检查小提琴

Answer 3

您总是可以在图像旁边添加一个带有所需文本的div，并将其不透明度设置为0，然后当您将鼠标悬停在图像上时，将图像的不透明度设置为低并增加div的不透明度。

Answer 4

实际上，它看起来就像在一个白色文本和不透明背景的div中褪色。

你需要做的是用图像和文本创建一个div

<div>
   <img src="..." style="position: relative; z-index: 100;" />
   <div style="margin: 0 auto; align: center; height: 100%; width: 100%; position: relative; z-index: 101; opacity: 0; >Number</div>
</div>

这个标记确保文本div与图像div重叠，而不是淡出图像和淡出文本。让文字淡出。

这个解决方案的另一部分是确保文本垂直居中。添加50%的不透明背景，你可以使用css3的rgba背景色，或者添加png背景色，并为div重复。

Answer 5

你可以把你的文本放入一个div，并使用position: absolute把它放在与你的图像相同的位置，也可以使用display: none使它不可见。然后，在JQuery中，把你的代码为了淡化不透明度，并使这个div使用$('#nameofthediv').show();可见，但要确保分配这个div一个更高的"z-index"比一个图像。z-index属性是有用的，例如当你有两个重叠的div，你决定哪一个将在顶部。z索引最高的元素是可见的元素。如果你不这样做，图像将在文本的顶部，所以你将无法看到文本。

Answer 6

这应该让您开始:http://jsfiddle.net/SBpzX/2/

$(document).ready(function() {
   $('.text').hide();
    $('img').animate({
       opacity:1
});
$('img').hover(function() {
    $(this).stop().animate({opacity:.4},200);
    $('.text').fadeIn();
}, function() {
    $(this).stop().animate({opacity:1},500)
    $('.text').fadeOut();
});

});