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

您可以在jQuery: there is a way to apply colour (tint) to an image?

找到答案

Answer 3

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

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

Answer 4

在每个锚点附加一个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 mouseover事件将其淡入：

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

Answer 5

这个jquery插件应该做得很好。（tancolor.js）

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

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

查看有关用法的文档，非常简单。 docs

鼠标悬停更改图像颜色

5 个答案: