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

我有一个picturelink，它在悬停时会逐渐变暗。我需要的是文本显示在上面。以下是我想要的示例： 我下面的代码将不透明度降低到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)
    
    });


});

$（文档）.ready（函数（）{
$（“#wb#U图像2，#wb#U图像3 a img”）。设置动画({
不透明度：1
});
$（'#wb_Image2，#wb_Image3 a img'）。悬停（函数（）{
$（this.stop（）.animate（{opacity:.4}，200）；
}，函数（）{
$（this.stop（）.animate（{opacity:1}，500）
});
});

---

提前感谢。

将

文本设置在span或div内，并将其
绝对定位到与相对定位的容器相对应的位置

然后
隐藏
或
显示
相应的文本

$(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');
    });
});

您始终可以在图像旁边添加一个div，其中包含所需的文本，并将其不透明度设置为0，然后当您将鼠标悬停在图像上时，将图像不透明度设置为低，并增加div不透明度
 实际上，它们看起来只是在一个带有白色文本和不透明背景的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>


最好记住，如果你正在处理事情的外观，那么很有可能它应该在CSS中完成（从长远来看，这将使你的生活更轻松）

我在这里模拟了一个例子：

您基本上需要创建一个在悬停时显示的框。通过使用
position:absolute
您可以让框显示在顶部，使用CSS我们可以让它在悬停时显示。
您可以将文本放入div中，并使用
position:absolute
将其放置在与图像相同的位置，还可以使用
显示：none
使其不可见。然后，在JQuery中，使用
$（'#nameofdiv'）.show（）将代码放在不透明度的地方，使这个div可见但请确保为该div分配比图像更高的“z索引”。例如，当您有两个重叠的div，并决定其中哪一个位于顶部时，z-index属性非常有用。z索引最高的元素是可见元素。如果不这样做，图像将位于文本顶部，因此您将无法看到文本。
这应该让您开始：

}))
 -非常酷的解决方案，我想知道您是否知道如何在同一张图片中包含多个文本。假设同一张图片被分成3个区域，用于3个不同的文本。谢谢
$(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();
});