jQuery 如何使用jquery在悬停时在褪色的图像上显示文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16971757/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display text over a faded image on hover using jquery
提问by Dave
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.
我有一个在悬停时淡化不透明度的图片链接。我需要的是在它上面显示文本。这是我想要的一个例子：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)
});
});
Thanks in advance.
提前致谢。
回答by rob_mccann
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).
最好记住，如果您正在处理事物的外观，很可能应该在 CSS 中完成（从长远来看，这将使您的生活更轻松）。
I've mocked up an example here: http://jsfiddle.net/HAcE2/
我在这里模拟了一个例子：http: //jsfiddle.net/HAcE2/
You basically need to create a box that appears when you hover. By using position:absoluteyou can get the box to appear over the top and using CSS we can get it to appear when we hover over.
您基本上需要创建一个在您悬停时出现的框。通过使用position:absolute你可以让框出现在顶部，使用 CSS 我们可以让它在我们悬停时出现。
回答by Sushanth --
Set the textinside a span or a div and position it absolutelycorresponding to the container which is relatively positioned.
在text里面设置一个span或一个div，并absolutely根据相对定位的容器进行定位。
Then hideor showthe corresponding text
然后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');
});
});
回答by Dylan N
You could always add a div with the desirable text in it alongside the image and have its opacity set to 0, then when you hover over the image set the image opacity down and increase the div opacity.
您始终可以在图像旁边添加一个带有所需文本的 div，并将其不透明度设置为 0，然后当您将鼠标悬停在图像上时，将图像不透明度设置为降低并增加 div 不透明度。
回答by Smeegs
Actually, it looks like they are just fading in a div with white text and opaque background.
实际上，看起来它们只是在带有白色文本和不透明背景的 div 中消失。
What you need to do is have a div with both the image and a text
你需要做的是有一个包含图像和文本的 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>
This markup makes sure that the text div overlaps the image div. Instead of fading out the image and fading in the text. Just fade in the text.
此标记确保文本 div 与图像 div 重叠。而不是淡出图像和淡入文本。只是淡入文本。
The other part of this solution is making sure that the text is centered vertically. And adding a 50% opaque background, you can either use css3 with an rgba background color or add a png background and repeat that for the div.
此解决方案的另一部分是确保文本垂直居中。并添加 50% 不透明背景，您可以使用带有 rgba 背景颜色的 css3 或添加 png 背景并为 div 重复该操作。
回答by user2435860
You can put your text into a div and use the position: absoluteto put it in the same spot as your image, and also display: noneto make it invisible. Then, in JQuery, put your code in order to fade fade the opacity and make this div visible using $('#nameofthediv').show();BUT make sure to assign this div a higher "z-index" than the one of the image. The z-index property is usefull for example when you have 2 overlapping divs, and you decide which one of them will be on top. The element with the highest z-index is the visible one. If you do not do that, the image will be on top of the text, so you won't be able to see the text.
您可以将文本放入 div 并使用position: absolute将其与图像放在同一位置，并display: none使其不可见。然后，在 JQuery 中，放置您的代码以淡化不透明度并使此 div 可见，$('#nameofthediv').show();但请确保为此 div 分配比图像更高的“z-index”。z-index 属性很有用，例如当您有 2 个重叠的 div，并且您决定其中一个将位于顶部时。z-index 最高的元素是可见元素。如果不这样做，图像将位于文本的顶部，因此您将无法看到文本。
回答by Trey Copeland
This should get you started: http://jsfiddle.net/SBpzX/2/
这应该让你开始：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();
});
});
});
