Javascript 鼠标悬停时，更改图像的不透明度和覆盖文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6377815/
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
On mouseover, changing an image's opacity and overlaying text
提问by kshen
I want to drop the opacity and overlay text on a thumbnail image when I mouse over it. I have several ideas about how to do it, but I'm fairly certain they're inefficient and clumsy.
当我将鼠标悬停在缩略图上时，我想将不透明度和覆盖文本放在缩略图上。我有几个关于如何做的想法，但我相当确定它们效率低下且笨拙。
- Make a duplicate image in Photoshop with the text overlay and reduced opacity. Swap the original out for the duplicate on mouseover.
- Use CSS to drop the opacity on mouseover. Use Javascript to toggle visibility of a div containing the overlay text.
- 在 Photoshop 中使用文本叠加和降低的不透明度制作复制图像。在鼠标悬停时将原件替换为副本。
- 使用 CSS 在鼠标悬停时删除不透明度。使用 Javascript 切换包含覆盖文本的 div 的可见性。
The problem I see with 1 is it seems like an unnecessary use of space and bandwidth, and will cause slow load times. With 2, it seems like I'd have to hard-code in the location of each div, which would be a pain to maintain and update. I know this is a somewhat general question, but I'm at a loss about how to go about this. How can I do this relatively simple task in a way that will make it easy to add new thumbnails?
我看到 1 的问题是它似乎不必要地使用空间和带宽，并且会导致加载时间变慢。使用 2，似乎我必须在每个 div 的位置进行硬编码，这将很难维护和更新。我知道这是一个有点笼统的问题，但我不知道如何解决这个问题。我怎样才能以一种可以轻松添加新缩略图的方式完成这个相对简单的任务？
回答by thirtydot
- Wrap your image in a
<div class="thumb"> - Add
position: relativeto.thumb. - Add
<div class="text>inside.thumb. - Add
display: none; position: absolute; bottom: 0to.text. - Use
.thumb:hover .text { display: block }to make the text visible on hover.
- 将您的图像包装在一个
<div class="thumb"> - 添加
position: relative到.thumb. - 添加
<div class="text>里面.thumb。 - 添加
display: none; position: absolute; bottom: 0到.text. - 使用
.thumb:hover .text { display: block }使悬停文字中。
Like this: http://jsfiddle.net/dYxYs/
像这样：http: //jsfiddle.net/dYxYs/
You could enhance this with some JavaScript/jQuery: http://jsfiddle.net/dYxYs/1/
你可以用一些 JavaScript/jQuery 来增强它：http: //jsfiddle.net/dYxYs/1/
$('.text').hide().removeClass('text').addClass('text-js');
$('.thumb').hover(function(){
$(this).find('.text-js').fadeToggle();
});
This way, the basic effect still works without JavaScript, and users with JavaScript get the appealing fade effect.
这样，基本效果在没有 JavaScript 的情况下仍然有效，使用 JavaScript 的用户可以获得吸引人的淡入淡出效果。
回答by daybreaker
Go with option 2. There are ways to do it to not have to write a jQuery function for each image. As seen in my jsfiddle.
选择选项 2。有一些方法可以不必为每个图像编写 jQuery 函数。正如在我的 jsfiddle 中看到的那样。
http://jsfiddle.net/daybreaker/dfJHZ/
http://jsfiddle.net/daybreaker/dfJHZ/
HTML
HTML
<img src="http://placekitten.com/300/300" />
<span class="text" style="display:none">THIS IS A KITTEN</span>
<br><br>
<img src="http://placekitten.com/200/200" />
<span class="text" style="display:none">THIS IS A KITTEN</span>
jQuery
jQuery
$('img').mouseover(function(){
$(this).css('opacity','.2');
$(this).next('span.text').show();
}).mouseout(function(){
$(this).css('opacity','1');
$(this).next('span.text').hide();
});
You would need to modify the span.textcss to overlay it on top of the image, but that shouldnt be too bad.
您需要修改span.textcss 以将其覆盖在图像之上，但这应该不会太糟糕。
回答by Niklas
Wrap it in an element and do something like this:
将它包装在一个元素中并执行如下操作：
var t;
$('div.imgwrap img').hover(function(){
t = $('<div />').text($(this).attr('title')).appendTo($(this).parent());
$(this).fadeTo('fast',0.5);
},function(){
$(this).fadeTo('fast',1);
$(t).remove();
});
with a markup similar to:
带有类似于以下内容的标记：
<div class="imgwrap">
<img src="http://www.gravatar.com/avatar/3d561d41394ff0d5d0715b2695c3dcf0?s=128&d=identicon&r=PG" title="text" />
</div>
example: http://jsfiddle.net/niklasvh/Wtr9W/
回答by Robert
Here's an example. You can position the text however you want, but the basic principle below.
这是一个例子。您可以随意放置文本，但基本原则如下。
#container { position: relative; }
#container img, #container div {
position: absolute;
width: 128px;
height: 128px;
}
#container img { z-index -1; }
#container div {
z-index 1;
line-height: 128px;
opacity: 0;
text-align: center;
}
#container:hover img {
opacity: 0.35;
}
#container:hover div {
opacity: 1;
}
回答by Erick Petrucelli
If you don't want to change your HTML wraping things etc, I suggest you this way. Here is the jQuery:
如果您不想更改 HTML 包装等内容，我建议您这样做。这是jQuery：
$(function() {
$(".thumb").mouseenter(function() {
var $t = $(this);
var $d = $("<div>");
$d.addClass("desc").text($t.attr("alt")).css({
width: $t.width(),
height: $t.height() - 20,
top: $t.position().top
});
$t.after($d).fadeTo("fast", 0.3);
$d.mouseleave(function() {
$(this).fadeOut("fast", 0, function() {
$(this).remove();
}).siblings("img.thumb").fadeTo("fast", 1.0);
});
});
});
回答by giorgio
2 is a good solution, have done about the same as this and it isn't as hard as you would've tought;
2 是一个很好的解决方案，已经完成了与此相同的解决方案，并且并不像您想象的那么难；
Drop de opacity with css indeed, than position a div relative to the img, and over it. It can be done with plain css. The z-index is the trick. That div can just be shown with $('#div').slideUp() ie.
确实使用 css 删除不透明度，而不是相对于 img 放置一个 div，然后在它上面。它可以用普通的 css 来完成。z-index 是诀窍。该 div 可以用 $('#div').slideUp() 即显示。
