背景圖像出現在懸停

我有一個按鈕，當懸停時，我想要背景圖像也顯示。（這是一個箭頭解釋按鈕）。有很多相似的問題，但我無法完全調整爲我工作的答案。背景圖像出現在懸停

的HTML看起來像

<div id="header_feedback"> 
    <a href="#contactForm"> 
     <img title="Add an Event" src="./img/header_feedback.png" alt="Give us your Feedback"/> 
    </a> 
</div>

的CSS則是

#header_feedback 
{margin-left:730px; 
margin-top:-135px; 
position:absolute;} 

#header_feedback:hover 
{ 
background: url ('./img/addevent_tip.png'); 
}

任何想法巨大的歡迎！

來源

2012-05-17 mercuryfrost

這裏的主要問題不在於你的CSS之間沒有空格。 Itagi's answer正確識別了在url與附屬地址/地址之間不能有空格的小問題。

但也有另外兩個更大的問題：

圖片網址無效：在應用時，background: url('./img/addevent_tip.png');未能找到有效的圖像。要解決這個問題，你需要兩個週期或零。因此，無論應用於不透明圖像background: url('/img/addevent_tip.png');或background: url('../img/addevent_tip.png');
背景是不可見：由於div的全部內容是圖像，並且圖像沒有透明度，你將無法看到，即使上懸停改變當它發生正確時。您可以通過將圖像的一部分設置爲透明來進行調整（也許可以爲非懸停狀態設置背景，使其看起來像通常那樣），或放棄圖像以支持CSS spriting。

來源

2012-05-17 14:12:54

謝謝Jeffrey。關於時間我反正學會了一些精靈用法！有什麼辦法可以讓背景變淡嗎？我嘗試過渡，但它從左側移動而不是保持靜止。 – mercuryfrost

你只需要改變它的方式如下：

#header_feedback:hover 
{ 
background: url('./img/addevent_tip.png'); 
}

「網址」和實際的URL

來源

2012-05-17 13:46:56

恐怕沒有做到這一點，雖然我認爲這是我做一些小而愚蠢的錯誤。您可以看到它在辯論calendar.com上不起作用，並有更新。 – mercuryfrost

我得到：GET http://debatecalendar.com/css/img/addevent_tip.png 404（找不到）相對路徑不正確...嘗試做'../img/addevent_tip.png'或'/ img/addevent_tip.png' –

好的，在進一步研究之後，那是一回事，第二件事是佈局本身，它被設置錯了（不需要大的邊緣導致背景圖像不被顯示，因爲爲了看到背景圖片，它必須適合在元素大小 –

#header_feedback a img{ display:none;} 
#header_feedback a:hover img{display:block}

來源

2012-05-17 13:48:41

我想你可能誤解了我的問題，我仍然需要顯示原始圖像，但是當它懸停時，我想也顯示背景img – mercuryfrost

背景圖像出現在懸停

回答

相關問題