使用JS onMouseover來改變圖像的不透明度

我知道使用CSS可以更容易，更快速地實現。我已經做到了這一點，但我試圖學習Javascript，並想知道爲什麼以下不起作用？這個想法是設置一個非常基本的事件處理程序，將鼠標移動到圖像上可以減少圖像的不透明度。使用JS onMouseover來改變圖像的不透明度

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

img { 
 
    opacity:1; 
 
} 
 

 
img.hover { 
 
    opacity:0.5; 
 
} \t

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

來源

2015-03-18 user4612360

因爲你_calling_你的函數，而不是分配_reference_將其添加到事件處理程序的屬性。 'img.onMouseover = changeClass;'是正確的。 – CBroe 2015-03-18 23:50:27

順便說一句，在第二次鼠標懸停之後，您將最終得到具有類「hoverhover」的元素，等等......所以您至少應該在類名前面插入一個空格。 – CBroe 2015-03-18 23:51:22

CBroe，謝謝。我沒有注意到調用函數的錯誤，而不是分配和缺少空間。感謝您的解釋。 – user4612360 2015-03-19 09:10:21

的代碼應該是

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

來源

2015-03-19 01:22:03

完美。感謝conanak99 – user4612360 2015-03-19 09:11:58

使用JS onMouseover來改變圖像的不透明度

回答

相關問題