Javascript jQuery 图像悬停颜色叠加
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3030988/
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
jQuery image hover color overlay
提问by goddamnyouryan
I can't seem to find any examples of this having been done anywhere on the internet before but here is what I am going to attempt to do...I'm trying to go about the cleanest possible way of laying this out.
我似乎无法在互联网上的任何地方找到任何这样的例子，但这是我将要尝试做的......我正在尝试以最干净的方式进行布局。
So I have an image gallery where the images are all different sizes. I want to make it so that when you mouseover the image, it turns a shade of orange. Just a simple hover effect.
所以我有一个图片库，其中的图片大小都不同。我想让它当您将鼠标悬停在图像上时，它会变成橙色。只是一个简单的悬停效果。
I want to do this without using an image swap, otherwise I'd have to create an orange colored hover-image for each individual gallery image, I'd like this to be a bit more dynamic.
我想在不使用图像交换的情况下执行此操作，否则我必须为每个单独的画廊图像创建一个橙色的悬停图像，我希望它更具动态性。
My plan is just to position an empty div over the image absolutely with a background color, width and height 100% and opacity: 0. Then using jquery, on mouseover I'd have the opacity fade to 0.3 or so, and fade back to zero on mouseout.
我的计划只是在图像上绝对放置一个空的 div，背景颜色，宽度和高度为 100%，不透明度为：0。然后使用 jquery，在鼠标悬停时我将不透明度淡化到 0.3 左右，然后淡入mouseout 为零。
My question is, what would be the best way to layout the html and css to do this efficiently and cleanly.
我的问题是，布局 html 和 css 以高效、干净地执行此操作的最佳方法是什么。
Here's a brief, but incomplete setup:
这是一个简短但不完整的设置：
<li>
<a href="#">
<div class="hover"> </div>
<img src="images/galerry_image.png" />
</a>
</li>
.hover {
width: 100%;
height: 100%;
background: orange;
opacity: 0;
}
回答by artlung
So let's start with slightly simpler HTML:
所以让我们从稍微简单的 HTML 开始：
<ul id="special">
<li><a href="#"><img src="opensrs-2.png" /></a></li>
<li><a href="#"><img src="opensrs-1.png" /></a></li>
</ul>
Here's my solution:
这是我的解决方案：
<style type="text/css">
#special a img { border: none;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#special a').bind('mouseover', function(){
$(this).parent('li').css({position:'relative'});
var img = $(this).children('img');
$('<div />').text(' ').css({
'height': img.height(),
'width': img.width(),
'background-color': 'orange',
'position': 'absolute',
'top': 0,
'left': 0,
'opacity': 0.5
}).bind('mouseout', function(){
$(this).remove();
}).insertAfter(this);
});
});
</script>
EDIT:With fast fade in, fade out:
编辑：快速淡入，淡出：
$('#special a').bind('mouseover', function(){
$(this).parent('li').css({position:'relative'});
var img = $(this).children('img');
$('<div />').text(' ').css({
'height': img.height(),
'width': img.width(),
'background-color': 'orange',
'position': 'absolute',
'top': 0,
'left': 0,
'opacity': 0.0
}).bind('mouseout', function(){
$(this).fadeOut('fast', function(){
$(this).remove();
});
}).insertAfter(this).animate({
'opacity': 0.5
}, 'fast');
});
回答by Gert Grenander
Are you looking for something like this:
你在寻找这样的东西：
jQuery:
jQuery：
<script type="text/javascript">
$(document).ready(function(){
$("#images span > img").hover(function(){
$(this).fadeTo("fast",0.3);
},function(){
$(this).fadeTo("fast",1.0);
});
});
</script>
HTML:
HTML：
<div id="images">
<span><img src="image1.jpg" /></span>
<span><img src="image2.jpg" /></span>
<span><img src="image3.jpg" /></span>
<span><img src="image4.jpg" /></span>
<span><img src="image5.jpg" /></span>
<span><img src="image6.jpg" /></span>
<span><img src="image7.jpg" /></span>
</div>
CSS:
CSS：
<style type="text/css">
#images span {
display: inline-block;
background-color: orange;
}
</style>
回答by Theopile
Heres the whole thing
这就是整件事
<script type="text/javascript">
$(function(){
$("img").hover(function(){
$(this).fadeTo("slow",0);
},
function(){
$(this).fadeTo("slow",1);
});
});
</script>
<style type="text/css">
#lookhere{
background-color:orange;
width:auto;
}
</style>
Heres the html
<div id="lookhere"><img href="you know what goes here"></div>
It works and looks pretty cool. Nice idea.
它有效而且看起来很酷。好主意。
