鼠标悬停更改图像颜色答案

【问题标题】：Mouseover Change Image Color鼠标悬停更改图像颜色
【发布时间】：2011-03-03 18:55:45
【问题描述】：

我有一个很大的图像网格。当用户将鼠标悬停在图像上时，我希望图像染成蓝色 0000FF。有没有办法在 JS 或 jquery 中做到这一点？理想情况下，我不必对每个图像应用一个类。这种处理应该会影响屏幕上的所有图像。

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

我一直看到的另一件事是paintbrushJS 和 pixastic，但我不知道如何使它们用于此目的。

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

编辑：图像必须是可点击的，这样 div 就不会阻碍链接的 img。有没有办法点击 div 或将 div 放在下面或什么的？提供的一些解决方案不使用 div，但我无法弄清楚。

谢谢！罗林

【问题讨论】：

标签： javascript jquery mouseover

【解决方案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">

【讨论】：

哇，谢谢！！！我在 stackoverflow 接受了真正的教育。我已经在 Flash 中解决了这一切，但结果过于繁重且不容易更新。用 html 重新拼凑我的网站真的让我大开眼界。
我有一个问题......现在链接不可点击，因为 div 覆盖了它。有没有办法避免这个问题？我已经更新了页面。
@Rollin：将pointer-events: none; 添加到#overlay 的CSS 定义中（参见stackoverflow.com/questions/3538489/…）。我已经用更改更新了链接的 jsfiddle。第一张图片链接到谷歌。但是，我不认为这是完全跨浏览器的解决方案。
@mellamokb 耶稣，我喜欢 stackoverflow。从那个链接衍生出来的链接也非常有用。问题解决了。谢谢。

【解决方案2】：

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

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

【讨论】：

感谢您的解释。我认为 McHerbie 就是这样做的，对吗？
@Rollin：是的。他的回答太棒了！
你觉得 roryf 的回答怎么样？在保持链接的同时，我似乎无法让 McHerbie 的工作正常进行。 div 隐藏了链接。

【解决方案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>

注意：您需要调整样式，使锚点变为floated 而不是图像。

如果您想要淡入/淡出，您可以使用 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);
    });
});

【讨论】：

这看起来很棒。我只是无法让它工作。我尝试在此处部署您的解决方案：rollinleonard.com/elements/index3.php您认为我在搞砸什么？
你需要把它放在一个document.ready处理程序中，会更新答案

【解决方案4】：

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

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

有一个互动demo。你可以玩弄它。

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

【讨论】：