如何使用jquery在悬停时在褪色图像上显示文本 [英] How to display text over a faded image on hover using jquery

问题描述

我有一个图片链接，褪色不透明悬停。我需要的是文本显示在它。下面是我想要的示例：
http://kspla.tumblr.com/
我的代码

 <脚本类型=text / javascript> 
 
 $（document）.ready（function（）{
 $（'＃wb_Image2，＃wb_Image3 a img'）。animate（{
 opacity：1 
 
}）; 
 
 $（'＃wb_Image2，＃wb_Image3 a img'）。hover（function（）{
 $（this）.stop opacity：.4}，200）; 
 
}，function（）{
 $（this）.stop（）。animate（{opacity：1}，500）
 
}）; 
 
 
}）; 
  
 
 
 
 
 
 
 
 p> 
 
解决方案
这是一个很好记住，如果你处理的事情看起来，机会是应该在CSS中完成
 
 
 
我在这里嘲笑了一个例子： http ：//jsfiddle.net/HAcE2/  
 
 
 
您基本上需要创建一个在悬停时显示的框。通过使用 position：absolute ，可以使框出现在顶部，使用CSS时，我们可以在悬停时显示。
 
I have a picturelink that fades opacity on hover.  What I need is for text to be displayed over it.  Here is an example of what I want:
http://kspla.tumblr.com/ 
My code below fades the opacity to 40% but I have no idea how to get text to be displayed over it.
<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)

    });


});


Thanks in advance.
解决方案
It's good to remember that if you're handling how things look, chances are it should be done in CSS (which will make your life easier in the long run).

I've mocked up an example here: http://jsfiddle.net/HAcE2/

You basically need to create a box that appears when you hover. By using position:absolute you can get the box to appear over the top and using CSS we can get it to appear when we hover over.

                        
这篇关于如何使用jquery在悬停时在褪色图像上显示文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！