問題實現CSS精靈

-1

這是我的形象： - http://www.flickr.com/photos/[email protected]/5064283850/問題實現CSS精靈

CSS n html

現在的問題： -

當我想要的圖像的不同部分。當我將鼠標懸停在鏈接出現在同一圖像出現。當我將鼠標移到一個鏈接上時，其他鏈接也會移動。我想是這樣的： -

http://www.flickr.com/photos/[email protected]/5063686801/

我要的是當鼠標懸停在「鏈接1」出現在背景中的灰色圖像。當鼠標懸停在「Link2」上時，會出現綠色圖像。依此類推。我究竟做錯了什麼？我一直試圖從昨天開始工作，但徒勞無功。

PS：呃，這不是BTW實際圖像。我不想在背景中使用顏色。這將是產品的圖像。哦，我希望在沒有鏈接懸停時出現灰色圖片。怎麼做？

[編輯]

我加在CSS如下： -

.sprite Div 
{ 
    width: 728px; 
    height: 243px; 
} 

.sprite a 
{ 
    width: 728px; 
    height: 243px; 
}

在HTML IK包括這樣的高度被固定在內部的div鏈接： -

<div id="SpriteDiv" class="sprite"> 
    My links here... 
</div>

來源

2010-10-09 Serenity

爲什麼不是沒有人回答？我需要緊急幫助..在這個愚蠢的精靈像任何東西：（（幫助!!! – Serenity 2010-10-09 07:31:03

根據您的評論Corrected：

本來我把灰色的背景上.container，但會要求在Chrome奇怪的行爲，所以我加了.sp_ID0

<style type="text/css"> 
    .sprite { display: block; margin-bottom: 5px; } 
    .container, .sp_ID0, .sprite div { width: 600px; height: 203px; } 
    .sp_ID0, .sprite:hover div { 
     background-image: url(http://farm5.static.flickr.com/4106/5064283850_fc6b5fac15_b.jpg); 
     background-repeat: no-repeat; 
    } 
    .container { position:relative; } 
    .sp_ID0 { z-index: -2; } 
    .sprite div { display: none; z-index: -1; } 
    .sp_ID0, .sprite:hover div { position: absolute; top: 0px; left: 0px; display: block; } 
    .sp_ID1 div { background-position: 0px -203px; } 
    .sp_ID2 div { background-position: 0px -406px; } 
    .sp_ID3 div { background-position: 0px -609px; } 
    .sp_ID4 div { background-position: 0px -812px; } 
    .sp_ID5 div { background-position: 0px -203px; } 
    .sp_ID6 div { background-position: 0px -406px; } 
</style> 

<div class="container"> 
<div class="sp_ID0">&nbsp;</div> 
    <a href=# class="sprite sp_ID1">Link1<div>&nbsp;</div></a> 
    <a href=# class="sprite sp_ID2">Link2<div>&nbsp;</div></a> 
    <a href=# class="sprite sp_ID3">Link3<div>&nbsp;</div></a> 
    <a href=# class="sprite sp_ID4">Link4<div>&nbsp;</div></a> 
    <a href=# class="sprite sp_ID5">Link5<div>&nbsp;</div></a> 
    <a href=# class="sprite sp_ID6">Link6<div>&nbsp;</div></a> 
</div>

Old solution.

來源

2010-10-09 16:12:49 y34h

不，不，這是我的代碼現在所做的事情：/我不希望這些鏈接分開......讓他們在一起這樣的http：///www.flickr.com/photos/[email protected]/5063686801/ ...與圖像背景..圖像實際上是一個橫幅和橫幅改變顏色（圖像）當鏈接懸停在...當一個盤旋應顯示「鏈接1」灰色圖像部分...「鏈接2」懸停應顯示綠色圖像部分等等......我如何實現這一點？ – Serenity 2010-10-09 16:47:36

請注意'：hover'僅適用於錨點元素IE6：因爲這個原因，我總是避免把鼠標懸停在其他元素上，但是，如果你不需要的話支持它，那麼這種方式很好。 – 2010-10-09 18:52:17

：謝謝！：D ...因爲像你這樣的人，所以這是值得的..真的很感謝幫助:) – Serenity 2010-10-09 20:35:53

首先，你應該設置大小沒有懸停的錨元素，這是什麼導致你的各個環節遊移（尺寸不應該a:hover定義）：

.sprite a { 
    display: block; 
    width: 728px; 
    height: 243px; 
}

接下來，你的圖像背景被分配到錨定體，沒有跨度，所以你需要定義與選擇這樣的位置：

.sp_ID1 a { 
    background-position: 0px 0px; 
}

來源

2010-10-09 05:49:56

確定lemme試試這個 – Serenity 2010-10-09 05:57:19

確定相同的圖像問題已得到解決..thnx ..但鏈接仍然轉移..更改代碼u說..甚至嘗試添加div..plz檢查添加的細節 – Serenity 2010-10-09 06:49:25

display：block應該也在非懸停選擇器上。只有背景圖像的東西應該在a：hover上。請參閱更新。 – 2010-10-09 07:00:21

問題實現CSS精靈

回答

相關問題