鼠标悬停更改图像颜色

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">

Answer 2

在图像上使用 div 的想法是可行的。您可以根据需要即时生成 div（或生成隐藏的 div 以在整个页面中重复使用），并在 onmouseover 事件期间将其放置在图像上：

$('img').mouseover(function() {
    // generate a div
    // position over current image
});

Answer 3

在每个锚点内附加一个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>

注意：您需要调整样式，以便锚点浮动而不是图像。

如果您想要淡入/淡出，可以使用 CSS3 过渡 或隐藏最初使用 span 并使用 jQuery mouseover 事件将其淡入：

$('a').each(function() {
    $(this).appendChild($('<span class="overlay" />').hide()).hover(function() {
        $(this).find('.overlay').fadeIn(500);
    }, function() {
        $(this).find('.overlay').fadeOut(1000);
    });
});

Answer 4

这个 jquery 插件应该很好地完成你要求的事情。 (tancolor.js)

$("#myImageID").tancolor({mode: "blue"});

有一个交互式演示。你可以玩玩它。

查看使用文档，非常简单。 文档