變化圖像與CSS

HTML：變化圖像與CSS

<a href="" class="buttons_position"><img src="images/order.png" height="49" width="214"></a>

CSS：

.buttons_position { 
    padding: 0 0 0 10px; 
    border: 0px; 
    margin: 0px; 
} 

.buttons_position a:hover { 
    background-image: url(images/ask_us_hover.png); 
    background-repeat: no-repeat; 
    width: 2149px; 
    height: 49px; 
    padding: 0 0 0 10px; 
    border: 0px; 
    margin: 0px; 
}

但懸停圖像也不會改變。如何用CSS做到這一點？

來源

2012-06-13 mbrc

你的意思改由''order.png' ask_us_hover.png' – mgraph

這就是原因和背景圖像是兩個完全不同的事情。嘗試在兩種情況下使用背景圖片，而不是圖片標籤。 – ericosg

您的背景圖像應用於懸停在標籤上，並且被標籤內的img覆蓋。將img標籤替換爲可以隱藏的文本（搜索圖像替換），並將不同的背景應用於a標籤的默認和懸停狀態。將單個圖像（精靈）作爲背景並在懸停時使用背景位置會是有益的。

圖片替換：http://css-tricks.com/css-image-replacement/

背景圖片精靈：http://nicolasgallagher.com/css-background-image-hacks/

尋找其他的答案，正確的做法應該是：

.buttons_position { 
    background-image: url(images/order.png); 
    padding: 0 0 0 10px; 
    border: 0px; 
    margin: 0px; 
} 

.buttons_position:hover { 
    background-image: url(images/ask_us_hover.png); 
    background-repeat: no-repeat; 
    width: 2149px; 
    height: 49px; 
    padding: 0 0 0 10px; 
    border: 0px; 
    margin: 0px; 
}

您可能還需要設置display: block;和寬度/高度屬性爲.buttons_position

來源

2012-06-13 10:52:44 Luca

就像luca說的那樣。 a：懸停是錯誤的 – senzacionale

刪除IMG標記上的圖像。像這樣寫：

.buttons_position { 
    background-image: url(images/order.png); 
    background-repeat: no-repeat; 
    display:block; 
    width: 2149px; 
    height: 49px; 
    padding: 0 0 0 10px; 
    border: 0px; 
    margin: 0px; 
} 

.buttons_position:hover { 
    background-image: url(images/ask_us_hover.png);   
}

HTML

<a href="#" class="buttons_position"></a>

入住這http://jsfiddle.net/X9wCL/

來源

2012-06-13 10:52:35 sandeep

請勿將標記留空，因爲如果純文本瀏覽器/圖像加載失敗，它將不會顯示任何內容。 – Luca

我嘗試這個，我laso添加顯示：塊;該圖像顯示，但懸停不起作用 – mbrc

這是我的工作檢查這個http://jsfiddle.net/X9wCL/ – sandeep

嘗試： HTML：

<a href="" class="buttons_position"></a>

CSS：

.buttons_position { 
    padding: 0 0 0 10px; 
    background-image: url(images/order.png); 
    background-repeat: no-repeat; 
    width: 2149px; 
    height: 49px; 
    border: 0px; 
    margin: 0px; 
} 
.buttons_position a:hover { 
    background-image: url(images/ask_us_hover.png); 
    background-repeat: no-repeat; 
    width: 2149px; 
    height: 49px; 
    padding: 0 0 0 10px; 
    border: 0px; 
    margin: 0px; 
}

來源

2012-06-13 10:52:35 mgraph

不要讓標籤爲空，因爲它不會顯示任何東西，以防萬一純文本瀏覽器/圖像失敗加載 – Luca

它應該是：

a.buttons_position:hover { 
    background-image: url(images/ask_us_hover.png); 
    background-repeat: no-repeat; 
    width: 2149px; 
    height: 49px; 
    padding: 0 0 0 10px; 
    border: 0px; 
    margin: 0px; 
}

你的鏈接是不是一個元素中與類.button_position

來源

2012-06-13 10:57:54 iMx

變化圖像與CSS

回答

相關問題