JavaScript 如何让图像在鼠标悬停时改变颜色？

Question

我有一个按钮和一个图像，并希望它们改变颜色 onmouseover。按钮改变颜色很好:

<script>
function secondColor(x) {
x.style.color="#000000";
}
function firstColor(x) {
x.style.color="#ffaacc";
}
</script>

<input onmouseover="secondColor(this)" onmouseout="firstColor(this)" type="submit"><br>

我怎样才能对图像做同样的事情？有什么办法吗:

<img src="..." ...... 

或者我是否必须用第二张图片来替换第一张图片 onmouseover 而这是唯一的方法？

Answer 1

如果您不太关心是否支持旧版浏览器，则可以使用新的 CSS3 过滤器 brightness。在 chrome 中，你可以这样写:

var image = document.getElementById('img');

image.addEventListener('mouseover', function() { 
    image.setAttribute('style','-webkit-filter: brightness(1.5)'); 
}, false);

image.addEventListener('mouseout', function() { 
    image.setAttribute('style','-webkit-filter: brightness(1.0)'); 
}, false);

不过，我不推荐这种方法。悬停时使用另一张图片是更好的解决方案。