javascript 鼠标悬停更改图像颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5185171/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Mouseover Change Image Color
提问by Rollin
I have a big grid of images. When a user mouseovers an image I want the image to tint blue 0000FF. Is there a way to do this in JS or jquery? Ideally, I wouldn't have to apply a class to each image. This treatment should affect all images on the screen.
我有一个很大的图像网格。当用户将鼠标悬停在图像上时，我希望图像将 0000FF 染成蓝色。有没有办法在 JS 或 jquery 中做到这一点？理想情况下，我不必为每个图像应用一个类。这种处理应该影响屏幕上的所有图像。
After searching the forums here and elsewhere I learned that some folks use a div over the image that has a color and opacity, but how would I apply that to all img?
在此处和其他地方搜索论坛后，我了解到有些人在具有颜色和不透明度的图像上使用 div，但我如何将其应用于所有 img？
Another thing I keep seeing is paintbrushJS and pixastic but I don't know how to make those work for this purpose.
我一直看到的另一件事是paintbrushJS 和pixastic，但我不知道如何使这些工作达到这个目的。
Here's the page I'm working on: http://www.rollinleonard.com/elements/
这是我正在处理的页面：http: //www.rollinleonard.com/elements/
EDIT: the images need to be be clickable so the div can't obstruct the linked img. Is there a way to click through the div or put the div below or something? Some solutions offered don't use a div but I can't figure them out.
编辑：图像需要是可点击的，所以 div 不能阻碍链接的 img。有没有办法点击 div 或将 div 放在下面？提供的某些解决方案不使用 div，但我无法弄清楚。
Thanks! Rollin
谢谢！罗林
回答by McHerbie
This is how you're gonna want to do it: http://jsfiddle.net/ztKJB/1/
这就是你想要的方式：http: //jsfiddle.net/ztKJB/1/
Javascript / jQuery:
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:
CSS：
#overlay {
display: block;
position: absolute;
background-color: rgba(0, 0, 255, 0.5);
top: 0px;
left: 0px;
width: 0px;
height: 0px;
}
HTML:
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">
回答by mellamokb
The idea of using a div over the image would work. You can generate the div on-the-fly as needed (or generate a hidden div to reuse throughout the page), and position it over the image during the onmouseover event:
在图像上使用 div 的想法会奏效。您可以根据需要即时生成 div（或生成一个隐藏的 div 以在整个页面中重复使用），并在 onmouseover 事件期间将其放置在图像上：
$('img').mouseover(function() {
// generate a div
// position over current image
});
回答by roryf
Append a spaninside each anchor, and adjust it's opacity on hover:
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>
Note: you'll need to adjust your styles so the anchors are being floated rather than the images.
注意：您需要调整样式，以便float编辑锚点而不是图像。
If you wanted a fade in/out, you could either use CSS3 transitionsor hide the spaninitially and use a jQuery mouseover event to fade it in:
如果您想要淡入/淡出，您可以使用CSS3 过渡或隐藏span初始并使用 jQuery 鼠标悬停事件将其淡入：
$('a').each(function() {
$(this).appendChild($('<span class="overlay" />').hide()).hover(function() {
$(this).find('.overlay').fadeIn(500);
}, function() {
$(this).find('.overlay').fadeOut(1000);
});
});
回答by Nicholas TJ
This jquery plugin should do the thing you asked pretty well. (tancolor.js)
这个 jquery 插件应该可以很好地完成您的要求。(tancolor.js)
$("#myImageID").tancolor({mode: "blue"});
There's an interactive demo. You can play around with it.
有一个交互式演示。你可以玩弄它。
Check out the documentation on the usage, it is pretty simple. docs
查看有关使用的文档，它非常简单。文档
