CSS雪碧按鈕

這些雪碧按鈕正在驅動我瘋狂。我幾乎可以讓他們工作，但不完全。CSS雪碧按鈕

我與這個非常簡單的精靈圖像再生：

jp2Rollover Sprite

，如果你想看到我有一個項目的jsfiddle >> HERE <<，但代碼如下，如果你只是想看看在它。

對於我的CSS，我有以下幾點：

#menu { 
    left:10px; 
    top:50px; 
    height:300px; 
    width: 147px; 
    position:fixed; 
} 
.sprite { 
    background: url('http://www.jp2code.net/logos/jp2Rollover.png') 0px -100px no-repeat; 
    height:50px; 
    padding-left: 50px; 
    width:147px; 
    z-index:1; 
} 
.sprite a { 
    background-position: 0px 0px; 
    color:Red; 
    vertical-align: middle; 
} 
.sprite a:hover { 
    background-position: 0px -50px; 
    color:Yellow; 
}

就這樣，我的HTML是簡單的小：

<html> 
<body> 
    <ul id="menu"> 
    <li class="sprite">You Are Here</li> 
    <li class="sprite"><a href="#A">Contact</li> 
    <li class="sprite"><a href="#B">Projects</li> 
    </ul> 
</body> 
</html>

我似乎無法讓我的活動鏈接的圖像（在位置0）或懸停鏈接圖像（在位置50）顯示。

此外，我想找到一種方法來使整個矩形區域（50 x 147）的超鏈接。

請問有人可以幫助我嗎？

來源

2012-08-08 jp2code

這就是你想要的：http://jsfiddle.net/PZh9F/37/？

CSS：

#menu { left:10px; top:50px; height:300px; width: 147px; position:fixed; } 
.sprite { background: url('http://www.jp2code.net/logos/jp2Rollover.png') 0px -100px no-repeat; height:50px; padding-left: 50px; width:147px; z-index:1; } 
.sprite a { background-position: 0px 100px; color:Red; vertical-align: middle; } 
.sprite.current { background-position: 0px 0px; } 
.sprite:hover { background-position: 0px -50px; } 
.sprite:hover a { color:Yellow; }

和HTML：

<html> 
<body> 
    <ul id="menu"> 
    <li class="sprite current">You Are Here</li> 
    <li class="sprite"><a href="#A">Contact</li> 
    <li class="sprite"><a href="#B">Projects</li> 
    </ul> 
</body> 
</html>

來源

2012-08-08 21:26:38

哦！大概。「你在這裏」應該是死鏈接，儘管（底部雪碧）。我要看看你現在做了什麼... – jp2code 2012-08-08 21:27:36

@ jp2code我在我的評論中更新了鏈接。希望現在一切都是按需要的。 – 2012-08-08 21:30:57

顯然，它很重要，我如何指定標籤，我不能（不應該）使用負值作爲我的初始位置。涼！ – jp2code 2012-08-08 21:38:41

你申請background到<li>標籤和background-position到<a>標籤，而不是同時應用到同一組的標籤。

來源

2012-08-08 21:25:11 depa

您爲li.sprite定義的背景不是超鏈接。這就是爲什麼當一個：懸停發生時，沒有背景下去-50px。

.sprite a { 
    background-image: url('http://www.jp2code.net/logos/jp2Rollover.png'); 
    background-position: 0px -100px; 
    color:Red; 
    vertical-align: middle; 
    display:block; 
    width:147px; 
    height:50px; 
    } 
.sprite a:hover { 

    background-position: 0px -50px; 

    }

來源

2012-08-08 21:25:31

我更新了你的提琴：http://jsfiddle.net/PZh9F/12/

正如你哈設置UL的背景（因爲它應該），你也需要改變懸停此相同ul的backgorund位置，所以不爲a和你一樣。更改文字顏色，但應該與a:hover完成我希望這可以指出你在正確的方向。

來源

2012-08-08 21:25:39 Pevara

y軸的背景位置應該有負值-50px和-100px。

來源

2012-08-08 21:25:48 Kolyunya

只是幾個問題：

錨標記未關閉，這樣就可能造成一些問題。如果您希望某些行爲類似於鏈接，那麼您應該使用錨標籤;我注意到第一個li標籤只是文本。從技術上講，你仍然可以達到同樣的效果，但我猜你正試圖鏈接到某個東西。

當您在使用背景圖像的按鈕內使用html文本作爲鏈接時，我建議將文本放入跨度中，以便於格式化。當您將填充添加到錨標籤而不使用跨距時，即使設置了寬度，也可以在某些瀏覽器的另一端獲得額外的填充。只是我多年來學到的一個小技巧。

使用精靈時，請確保將高度，寬度和顯示：塊屬性添加到「a」選擇器。這將確保整個鏈接是可點擊的。

它看起來像你的一些懸停跳躍，這可能是你的精靈的問題。測量結果準確至關重要。如果它只有1px，可能會產生不希望的閃爍效果。

完整的代碼是在這裏： http://jsfiddle.net/PZh9F/65/

希望幫助！

來源

2012-08-08 21:59:26 jenhan

這幾乎就是我所追求的。您剛發佈的版本（＃65）的第二張圖片（@ 50px）顯示在「您在這裏」部分，而不是第一張圖片（@ 0px）。有沒有一種方法可以讓您將「你在這裏」部分變成深灰色而不是超鏈接？ – jp2code 2012-08-09 01:18:43

我不確定爲什麼你不希望它充當超鏈接，但是所有你需要做的使用深灰色背景圖片是刪除活動類。如果您不打算將它用作鏈接（將您帶到另一個頁面），則將樣式應用到「li」選擇器而不是「a」選擇器。 – jenhan 2012-09-17 16:02:31

嗨jenhan。如果Menu具有PageA，PageB和PageC，但顯示的是PageA，則Menu.PageA不需要是鏈接。工作，最終結果是[這裏]（http://www.jp2code.net）。 – jp2code 2012-09-17 16:25:54

回答

相關問題