8

我有一个图片链接，可以在悬停时淡化不透明度。我需要的是在它上面显示文本。这是我想要的一个示例：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)
    
    });


});

提前致谢。

4

6 回答 6

18

最好记住，如果您正在处理事物的外观，则很可能应该在 CSS 中完成（从长远来看，这将使您的生活更轻松）。

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

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

于 2013-06-06T20:50:37.637 回答
4

在里面设置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');
    });
});

检查小提琴

于 2013-06-06T20:41:59.013 回答
0

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

于 2013-06-06T20:43:04.667 回答
0

实际上，看起来它们只是在一个带有白色文本和不透明背景的 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 重复该操作。

于 2013-06-06T20:47:33.460 回答
0

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

于 2013-06-06T20:55:59.203 回答
0

这应该让你开始：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();
});

});

于 2013-06-06T20:56:37.583 回答