更改在點擊和鼠標上的div背景

我想改變圖片在鼠標上的div和點擊使用JS。像這樣：更改在點擊和鼠標上的div背景

var favs = document.getElementsByClassName("fav-wrapper"); 
    for (var i = 0; i < favs.length; i++) { 
    favs[i].innerHTML = '<img src="images/favorite.png" />'; 
    favs[i].onMouseOver = function() { 
     favs[i].innerHTML = "<img src='images/favorite_hover.png' />"; 
    } 
    favs[i].onClick = function() { 
     favs[i].innerHTML = "<img src='images/favorite_on.png' />"; 
    }; 
}

但由於某些原因，它不起作用。我究竟做錯了什麼？

來源

2015-04-26 Tristan Tzara

事件處理變化的背景試試這個方法都是小寫的 – mplungjan

另外請注意，如果你確實得到事件處理程序的工作，你的代碼不會以正確的方式工作。當事件被觸發時，它們將設置循環中最後一個元素的innerHTML –

嘗試使用小寫事件處理程序，實際上你需要一個閉包讓[i]在循環中工作。我更喜歡在你的情況下使用this。

var favs = document.getElementsByClassName("fav-wrapper"); 
for (var i = 0; i < favs.length; i++) { 
    favs[i].innerHTML = '<img src="images/favorite.png" />'; 
    favs[i].onmouseover = function() { 
    this.innerHTML = "<img src='images/favorite_hover.png' />"; 
    } 
    favs[i].onclick = function() { 
    this.innerHTML = "<img src='images/favorite_on.png' />"; 
    } 
}

但爲什麼不只是改變圖像的src？

var favs = document.getElementsByClassName("fav-wrapper"); 
for (var i = 0; i < favs.length; i++) { 
    var fav=favs[i]; 
    fav.getElementsByTagName("img")[0].src="images/favorite.png"; 
    fav.onmouseover = function() { 
    this.getElementsByTagName("img")[0].src="images/favorite_hover.png"; 
    } 
    fav.onmouseout = function() { 
    this.getElementsByTagName("img")[0].src="images/favorite.png"; 
    } 
    fav.onclick = function() { 
    this.getElementsByTagName("img")[0].src="images/favorite_on.png"; 
    } 
}

，你可以順便做這一切與CSS

來源

2015-04-26 20:45:34 mplungjan

我試過小寫字母，但它仍然不起作用 –

請參閱更新..... – mplungjan

是的，「this」修復了它。但是當我將鼠標從該div移開時，如何更改圖片？ –

您可以使用純CSS懸停和點擊

.image{width:500px;height:500px;background-image: url("http://www.toolsformoney.com/financial_software_demos.jpg");background-repeat: no-repeat;} 
 
.image:hover{background-image: url("http://www.hostpph.com/blog/wp-content/uploads/2012/06/free-bookie-software-demo-large.jpg");background-repeat: no-repeat;} 
 
.image:focus{background-image: url("https://www.arxan.com/wp-content/uploads/assets1/images/demo.png");background-repeat: no-repeat;outline: 0;transition:0s;}

<div class="image" tabindex="0"> 
 
</div>

來源

2015-04-26 21:05:27

問題是，在點擊後圖像不會持續，點擊的版本將保持只有當鼠標按鈕被點擊 –

@TristanTzara現在嘗試 –

@mplungjan現在怎麼樣 –

更改在點擊和鼠標上的div背景

回答

相關問題