如何使用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)
    
    });


});

提前致谢。

- Dave

Answer 1

记住，如果你正在处理外观方面的事情，很可能应该在CSS中完成（这将使您的工作在长远来看更加轻松）。

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

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

- rob_mccann

Answer 2

将文本放在一个标签内或

标签内，并将其绝对定位于相对定位的容器中。

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

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

Check Fiddle

- Sushanth --

---

非常酷的解决方案，我想知道您是否知道如何在同一张图片中放置多个文本。比如说将同一张图片分成3个区域，用于展示3个不同的文本。谢谢。 - Nuno Sarmento

Answer 3

实际上，看起来他们只是淡入一个带有白色文本和不透明背景的 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%不透明度的背景，您可以使用带有rgba背景颜色的css3或添加png背景并将其重复应用于div。

- Smeegs

Answer 4

这应该可以帮助你入门：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();
});

});

- Trey Copeland

Answer 5

您可以在图像旁添加一个包含所需文本的div，并将其opacity设置为0，然后当您悬停在图像上时，将图像opacity降低并增加div opacity。

- Dylan N

Answer 6

您可以将文本放入一个 div 中，并使用 position: absolute 将其放置在与图像相同的位置，还可以使用 display: none 使其不可见。然后，在 JQuery 中，编写代码以淡化透明度并使用 $('#nameofthediv').show(); 使此 div 可见，但一定要将此 div 分配一个比图像更高的 "z-index"。当您有两个重叠的 div 时，z-index 属性非常有用，您可以决定哪一个位于顶部。具有最高 z-index 的元素是可见的。如果您不这样做，图像将位于文本之上，因此您将无法看到文本。

- user2435860