鼠标悬停更改图片颜色

我有一个很大的图像网格。当用户鼠标悬停图像时，我想让图像着色蓝色0000FF。有没有办法在JS或jQuery中做到这一点？理想情况下，我不必为每个图像应用一个类。这种处理应该会影响屏幕上的所有图像。鼠标悬停更改图片颜色

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

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

这里是我工作的页面： http://www.rollinleonard.com/elements/

编辑：图片必须是可点击所以DIV不能妨碍联IMG。有没有办法点击div或将div放在下面？提供的一些解决方案不使用div，但我无法弄清楚。

谢谢！ Rollin

来源

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

来源

2011-03-03 19:11:15 McHerbie

哇，谢谢！我在这里得到一个真正的教育在stackoverflow。我把这一切都发现在Flash中，但结果太重了，并且不容易更新。把我的网站拼凑在一起，真的让我大开眼界。 – Rollin 2011-03-03 20:35:25

这似乎并没有删除'mouseout'中的覆盖... – mellamokb 2011-03-03 20:55:02

虽然我有一个问题...现在链接不可点击，因为div覆盖它。有没有办法避免这个问题？我更新了该页面。 – Rollin 2011-03-03 21:20:05

在图像上使用div的想法可行。您可以生成即时需要的股利（或生成一个隐藏的div整个页面重用），和onmouseover事件期间，它的位置在图像：

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

来源

2011-03-03 19:01:28 mellamokb

感谢您的解释。我认为McHerbie就是这样做的，对吧？ – Rollin 2011-03-03 20:44:05

@Rollin：是的。他的回答很棒！ – mellamokb 2011-03-03 20:53:10

你对roryf的回答有什么看法？在保持链接的同时，我似乎无法让McHerbie的工作成功。该div隐藏链接。 – Rollin 2011-03-03 22:20:55

你可以在这里找到答案jQuery: there is a way to apply colour (tint) to an image?

来源

2011-03-03 19:02:24

附加一个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); 
    }); 
});

来源

2011-03-03 19:11:43 roryf

看起来很棒。我只是无法让它工作。我试着在这里部署你的解决方案：http://www.rollinleonard.com/elements/index3.php你认为我搞砸了什么？ – Rollin 2011-03-03 21:33:38

你需要把它放在一个document.ready处理程序中，会更新答案 – roryf 2011-03-04 09:37:00

这个jQuery插件应该做的你问的事很不错。（tancolor.js）

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

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

查看关于使用的文档，它非常简单。docs

来源

2013-11-12 15:22:51

鼠标悬停更改图片颜色

回答

相关问题