jQuery图片悬停颜色叠加 [英] jQuery image hover color overlay
问题描述
我似乎找不到任何这样的例子在互联网上的任何地方,但在这里是我将要尝试做...我试图去尽可能最干净的铺设方法out。
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.
我的计划只是在图像上放置一个空的div,绝对具有背景颜色,宽度和高度100 %and opacity:0然后使用jquery,在鼠标悬停时,我会有不透明度褪色到0.3左右,并在mouseout时淡出回到零。
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.
我的问题是,
这是一个简单但不完整的设置:
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;
}
推荐答案
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>
这是我的解决方案:
<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>
编辑:快速淡入,淡出:
$('#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');
});
这篇关于jQuery图片悬停颜色叠加的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!