Question

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

＆＃13;

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

＆＃13;

img {
    opacity:1;
}

img.hover {
    opacity:0.5;
}

＆＃13;

<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>

＆＃13;

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来改变图像的不透明度

1 个答案: