如何更改懸停上的背景圖像更改

我想將鼠標懸停在div id-「RollOver1」上，並且能夠將背景更改爲與主背景不同的圖像。只粘貼滾動div的HTML不能使用jscript，所以有沒有一種方法在HTML或....？如何更改懸停上的背景圖像更改

<div id="RollOver1" style="position:absolute;overflow:hidden;left:152px;top:397px;width:183px;height:183px;z-index:4"> 
<a href="./car.html"> 
<img class="hover" alt="" src="images/Enter_02.jpg" style="left: 0px; top: 0px; width: 183px; height: 183px; display: block;"> 
<span style="display: none;"><img alt="" src="images/index_01.jpg" style="left:0px;top:0px;width:183px;height:183px"></span> 
</a> 
</div>

來源

2014-09-24 Sameer Butt

如果[搜索「HTML哈弗」（https://www.google.co.uk/search？q = html％20hover）in Google你的答案是第一個在列表中（儘管由W3Schools提供） – George 2014-09-24 07:52:07

爲什麼人們在stackoverflow上提出這樣的問題？ – 2014-09-24 08:00:47

很好實際上，我們問這些問題，因爲我們試過的東西我們不明白，因此再次問這個問題，希望另一個答案，你可以理解....... – 2014-09-24 09:33:05

您可以使用:hover僞類：

#RollOver1 { 
    background: url('img1.png'); 
} 

#RollOver1:hover { 
    background: url('img2.png'); 
}

但你會通常看到圖像變化之間的「變化」，因爲第二張圖像會變成t需要一些時間來加載。
爲了避免這種情況，請使用圖像精靈。把兩個圖像（正常和懸停），以單一圖像和比使用CSS background-position

#RollOver1 { 
    background: url('sprite.png') no-repeat 0 0; 
} 

#RollOver1:hover { 
    background-position: -80px -90px; 
}

它將加載小圖像（如按鈕，圖標等）更有效的方式。 Check this link

來源

2014-09-24 07:54:07 Justinas

@SameerButt是的 – Justinas 2014-09-24 09:40:28

使用CSS僞類:hover

來源

2014-09-24 07:48:06 sooks

您可以用下面的代碼做到這一點：

#RollOver1 { 
    background:url(INITIAL_BACKGROUND);//here use the url of the background you want when is NOT on hover 
} 
#RollOver1:hover { 
    background:url(BACKGROUND_ON_HOVER);//here use the url of the bg you want when is on hover 
}

來源

2014-09-24 07:48:34

因爲我已經有一個初始背景圖像，我可以做下面的代替＃RollOver1 a：hover { backgroundimage：url（images/splash-spring_mercedes.jpg）; } – 2014-09-24 09:47:07

試一試，我認爲它會奏效。 – 2014-09-24 09:51:22

使用jQuery你可以嘗試

$(document).on("mouseover", "#RollOver1", function(e) { 
$(this).css("background", "url(sampleImage.png) no-repeat"); 
    } 
});

來源

2014-09-24 07:56:26 Rasel

您可以使用下面的樣式

.RollOver1:hover { 
    background-image: url('paper.gif'); 
}

來源

2014-09-24 07:56:56 amit

如何更改懸停上的背景圖像更改

回答

相關問題