鼠标悬停更改图片颜色
问题描述:
我有一个很大的图像网格。当用户鼠标悬停图像时,我想让图像着色蓝色0000FF。有没有办法在JS或jQuery中做到这一点?理想情况下,我不必为每个图像应用一个类。这种处理应该会影响屏幕上的所有图像。鼠标悬停更改图片颜色
在搜索这里和其他地方的论坛后,我了解到有些人使用具有颜色和不透明度的图像上的div,但是我如何将它应用于所有img?
我看到的另一件事是paintbrushJS和pixastic,但我不知道如何使这些工作为此目的。
这里是我工作的页面: http://www.rollinleonard.com/elements/
编辑:图片必须是可点击所以DIV不能妨碍联IMG。有没有办法点击div或将div放在下面?提供的一些解决方案不使用div,但我无法弄清楚。
谢谢! Rollin
答
这是你自己是怎么想这样做:http://jsfiddle.net/ztKJB/1/
使用Javascript/jQuery的:
$overlay = $('#overlay');
$('img').bind('mouseenter', function() {
$this = $(this);
if ($this.not('.over')) {
$this.addClass('over');
$overlay.css({
width : $this.css('width'),
height : $this.css('height'),
top : $this.offset().top + 'px',
left : $this.offset().left + 'px',
}).show();
}
}).bind('mouseout', function() {
$(this).removeClass('over');
});
CSS:
#overlay {
display: block;
position: absolute;
background-color: rgba(0, 0, 255, 0.5);
top: 0px;
left: 0px;
width: 0px;
height: 0px;
}
HTML:
<div id="overlay"></div>
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/rgb-dots-olan3.jpg" width="150" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/rgb-dots-olan2.jpg" width="150" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/IMG_3291.jpg" width="225" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/1153-1188.jpg" width="200" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/P1010036.jpg" width="200" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/dressRehearsal.jpg" width="267" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/sinWave.jpg" width="225" height="150"
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/mockUp2.jpg" width="225" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/PICT0453.jpg" width="113" height="150">
答
在图像上使用div的想法可行。您可以生成即时需要的股利(或生成一个隐藏的div整个页面重用),和onmouseover事件期间,它的位置在图像:
$('img').mouseover(function() {
// generate a div
// position over current image
});
答
附加一个span
每个锚内,并调整它在悬停不透明度:
<script>
$(function() {
$('a').each(function() {
$(this).appendChild('<span class="overlay" />');
});
});
</script>
<style>
a {
position: relative;
}
a .overlay {
background-color: #00f;
height: 100%;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
width: 100%;
}
a:hover .overlay {
opacity: 0.4; /* adjust to suit */
}
</style>
注意:您需要调整你的风格,所以锚点是float
编辑而不是图像。
如果你想淡入/淡出,你既可以使用CSS3 transitions或隐藏span
最初并使用一个jQuery鼠标悬停事件褪色它:
$('a').each(function() {
$(this).appendChild($('<span class="overlay" />').hide()).hover(function() {
$(this).find('.overlay').fadeIn(500);
}, function() {
$(this).find('.overlay').fadeOut(1000);
});
});
哇,谢谢!我在这里得到一个真正的教育在*。我把这一切都发现在Flash中,但结果太重了,并且不容易更新。把我的网站拼凑在一起,真的让我大开眼界。 – Rollin 2011-03-03 20:35:25
这似乎并没有删除'mouseout'中的覆盖... – mellamokb 2011-03-03 20:55:02
虽然我有一个问题...现在链接不可点击,因为div覆盖它。有没有办法避免这个问题?我更新了该页面。 – Rollin 2011-03-03 21:20:05