使用 JS onMouseover 改变图像的不透明度

Question

我知道使用 CSS 可以更轻松、更快速地实现这一点。我已经这样做了，但正在尝试学习 Javascript 并且想知道为什么以下内容不起作用？想法是设置一个非常基本的事件处理程序，将鼠标移到图像上会降低图像的不透明度。

function changeClass () {
    document.getElementByTagName("img").className += "hover"
}
    
img.onMouseover = changeClass();

img {
    opacity:1;
}

img.hover {
    opacity:0.5;
}

<div id="image_wrapper">
 <table id="image_table">
  <tr>
   <td>
    <img src="image1.gif" alt="image1" />
   </td>
            <td>
                <img src="image2.gif" alt="image2" />
            </td>
        </tr>
 </table>
</div>

Answer 1

代码应该是

function changeClass () {
     var className = document.getElementByTagName("img").className;
     if(className.indexOf('hover') == -1) {
         //Only add the class name 1 time
         document.getElementByTagName("img").className += " hover"
     }
}

img.onMouseover = changeClass; //Pass the function as a callback

使用 JS onMouseover 改变图像的不透明度

Using JS onMouseover to change opacity of image

javascript

opacity