鼠标悬停更改图像颜色

Question

我有一个很大的图像网格.当用户将鼠标悬停在图像上时,我希望图像着色为蓝色0000FF.有没有办法在JS或jquery中执行此操作？理想情况下,我不必为每个图像应用一个类.此处理应影响屏幕上的所有图像.

在这里和其他地方搜索论坛后,我了解到有些人在图像上使用了一个有颜色和不透明度的div,但我如何将它应用于所有img？

我一直看到的另一件事是paintbrushJS和pixastic,但我不知道如何使这些工作为此目的.

这是我正在处理的页面:http: //www.rollinleonard.com/elements/

编辑:图像需要是可点击的,因此div不能阻止链接的img.有没有办法点击div或将div放在下面或什么？提供的一些解决方案不使用div但我无法弄明白.

谢谢!罗林

Answer 1

这就是你想要做的事情: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">