CSS - 圖像和懸停不能正常工作

我在頁面上有圖像，當我將圖像懸停時，圖像應顯示不同的顏色。懸停本身有效，但原始圖像位於懸停圖像的頂部。我曾嘗試設置z-index，但無法正常工作。CSS - 圖像和懸停不能正常工作

這裏是CSS：

#login, #logout { 
float:left; 
padding: 0px 10px; 
margin-left:5px; 
margin-top:15px; 
z-index:1; 
} 

#login:hover{ 
background:transparent url('../images/skin/loginhover.png') no-repeat 0px 0px; 
float:left; 
padding: 0px 10px; 
margin-left:15px; 
margin-top:15px; 
z-index:10; 
} 
#logout:hover{ 
background:transparent url('../images/skin/logouthover.png') no-repeat 0px 0px; 
float:left; 
padding: 0px 10px; 
margin-left:15px; 
margin-top:15px; 
z-index:10; 
}

感謝任何幫助和建議！

來源

2011-07-10 L84

我可以建議你改用CSS精靈。我相信他們是實現你想要的更有效的方法。

而不是'重新發明輪子'，並寫下如何做到這裏看看http://sixrevisions.com/css/css-sprites-site-speed/或只是谷歌'CSS Sprites'。

它們可以減少HTTP請求，從而減少網站使用的帶寬量。

希望有所幫助。如果沒有，評論，我會嘗試，並提出一個更好的選擇。

乾杯，馬修

來源

2011-07-10 07:01:53

這也將解決您的對齊問題。 –

謝謝我將與精靈合作，看看我得到了什麼=> – L84

感謝您的建議和幫助。我把它當作精靈來工作。謝謝！ – L84

你最好具有相同元素的原始圖像和懸停狀態。現在，原始圖像是鏈接標記中包含的圖像，因此它位於頂部。

做這個

刪除圖像

添加這個CSS來#login

background: url("../images/skin/login.png") top left no-repeat; 
display: block; 
height: 26px; 
width: 80px;

最好是有（精靈）在同一圖像上兩個圖像，只是更改懸停時的背景位置。這消除了第一次懸停時圖像加載時閃爍。看到馬修對此的另一個答案。

來源

2011-07-10 07:07:00 jwinn

謝謝，我會給精靈一個嘗試=> – L84

感謝您提供的信息我工作=> – L84

刪除懸停CSS和圖像改成這樣：

<img height="26" width="80" alt="LOGIN" src="/images/skin/login.png" onmouseover="switchImageIdOver(this,'../images/skin/loginhover.png');" onmouseout="switchImageIdOut(this,'/images/skin/login.png'); />

這個腳本添加到您的網頁：

function switchImageIdOver(elem, imgPath) { 
elem.src = imgPath; 
} 
function switchImageIdOut(elem, imgPath) { 
elem.src = imgPath; 
}

來源

2011-07-10 07:12:43 kleinohad

如果你像我一樣，不喜歡使用精靈：

我想出了一個快速簡單的方法來獲得相同的效果（圖像淡入淡出）唯一的缺點是你需要一個tr答案是PNG，但是用很多按鈕或社交媒體圖標效果很好。

HTML：

<div class="facebookicon"> 
    <a href="#!"><img src="http://example.com/some.png"></a> 
</div>

CSS：

.facebookicon img { 
    background: #fff; 
    transition: background 400ms ease-out; 
} 

.facebookicon img:hover { 
    background: #3CC; 
    transition: background 400ms ease-in; 
} 
/* you need to add various browser prefixes to transition */ 
/* stripped for brevity */

讓我知道如果你喜歡它。

來源

2012-07-17 20:02:11 matt

CSS - 圖像和懸停不能正常工作

回答

相關問題