CSS3懸停不能用於更改按鈕圖像

我在這裏完全無能爲力。我有懸停功能在UL導航菜單上工作正常，但現在我試圖懸停一個按鈕，並在盯着我的代碼超過15分鐘後，我不明白...CSS3懸停不能用於更改按鈕圖像

這是我的HTML：

<div> 
     <a id="backbutton" href="services.html" title="Go back to Services">Go Back</a> 
     <br /> 
</div>

這是我的CSS3：

#backbutton { 
display: block; 
width: 200px; 
height: 54px; 
background: url('../images/BackButton.png') center center no-repeat; 
text-indent: -9999px;  
}

上面這一個是工作完全正常。文本消失，按鈕正常顯示。它不工作

#backbutton a:hover { 
background: url('../images/BackButtonHover.png') center center no-repeat; 
width: 200px; 
height: 54px; 
}

圖像下面的代碼不會取代我的目標懸停形象（是的，它被上傳我的服務器上。）

任何線索？

來源

2015-05-14 AstraAka

'＃backbutton' *爲*了''元素。它看起來像你想'#backbutton：hover {...}'。 – showdev

#backbutton a:hover

到

#backbutton:hover

#backbutton { 
 
display: block; 
 
width: 200px; 
 
height: 54px; 
 
background: url('http://wiki.openstreetmap.org/w/images/1/1c/OpenClosed.png') center center no-repeat; 
 
    
 
} 
 
#backbutton:hover { 
 
background: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTiC0kOjuPsNSp7qFgKtSZyccyZZtalf58MRnztInW19zW5WV8H1g') center center no-repeat; 
 
width: 200px; 
 
height: 54px; 
 
}

<a id="backbutton" href="#" title="Go back to Services">Go Back</a>

來源

2015-05-14 19:02:33 Dmitriy

太棒了！它現在工作正常:)儘管我讀了至少30次的代碼，但我沒有注意到！萬分感謝！！ – AstraAka

您嘗試將:hover屬性分配給一個鏈接（a元素）是低於 id爲backbutton中的元素層次結構。

而不是

#backbutton a:hover

使用選擇

#backbutton:hover

，它應該工作。如果要指定，它應該隻影響到與ID backbutton的聯繫，而不是與該ID的任何元素，使用選擇

a#backbutton:hover

來源

2015-05-14 19:05:47 Timo

CSS3懸停不能用於更改按鈕圖像

回答

相關問題