創建CSS雪碧：懸停滾過圖片鏈接

我有一個問題，我希望我能得到答案。我試圖從頭創建一個網站（不使用Dreamweaver，Expression Web等），我只使用筆記本。我試圖完成的是創建兩個導航鏈接作爲翻轉CSS精靈圖像（使用Pseudo-class元素：懸停）在我想稍後移動頁面的標記中。上週我花了所有的努力試圖解決這個問題，但沒有成功。我去過www.w3schools.com和這個網站以找到一個解決方案，但仍似乎無法讓這個工作正常。我也處於嚴格的環境中，只允許我在Win7操作系統上使用一個瀏覽器（IE8）。請原諒我糟糕的CSS編碼;這是我第一次參加。創建CSS雪碧：懸停滾過圖片鏈接

目前我使用的HTML格式如下兩個鏈接：

<div id="linkbox"> 
<ul class="GoogleFrame"> 
<li class="Google"><a href="www.google.com"></a></li> 
</ul> 
<ul class="BingFrame"> 
<li class="Bing"><a href="www.bing.com"></a></li> 
</ul> 
</div>

這裏是我使用上述HTML CSS的：

#linkbox { 
    width: 312px; 
    height: 388px; 
    background: url('images/container.png'); 
    padding: 0px; 
    margin: 0px; 
    position: fixed; 
    left: 0px; 
    top: 410px; 
    z-index: 1 
} 

.GoogleFrame { 
    position:fixed; 
    left: 10px; 
    top: 100px 
} 

.GoogleFrame li { 
    list-style:none; 
    position:absolute; 
} 

.GoogleFrame li, .GoogleFrame a { 
    height:54px; 
    display:block; 
} 

.Google { 
    left:0px; 
    width:260px; 
    background: url('images/google.png') 0px 0px; 
} 

.Google a:hover { 
    background: url('images/google.png') -261px 0px; 
}

任何幫助或指導將是不勝感激！

來源

2014-01-14 Fred

如果您對不同的懸停狀態使用不同的圖像......您並未使用精靈。 –

你的精靈圖像在哪裏？ googleh.png或google.png？ ** background：url（'images/container.png'）; **不正確的css指令也是...... –

通常，使用精靈的要點是讓所有的圖像狀態/圖標在同一個圖像文件中。你故意調用兩個不同的圖像文件嗎？ – sbeliv01

對於CSS子畫面圖像，你可以做這樣的事情：

HTML

<ul> 
    <li> 
     <a href="#">text</a> 
    </li> 

    <li> 
     <a href="#">text</a> 
    </li> 

    <li> 
     <a href="#">text</a> 
    </li> 
</ul>

CSS

ul {width:100px;} 
li { margin-bottom:5px; } 
li a { 
    text-indent:-9999em; /* hide our text */ 
    display:block; 
    height:40px; 
    background:url('http://placekitten.com/100/80') no-repeat 0 0; 
} 

li a:hover { background-position:0 -40px;}

JSFiddle Demo

的想法是，你有1個形象，你看它的一半，然後用:hover你可以改變圖像的background-position展現on/off狀態

來源

2014-01-14 15:33:55

謝謝各位快速回復。我發現我忘了爲Bing Link添加CSS。所以基本上，我會有一個垂直方式的兩個單獨的鏈接，他們的a：懸停圖像將來自同一個google.png文件。 @Nick R，所以如果想要包含兩個鏈接（或更多），我將如何根據上面的示例執行HTML和CSS？謝謝 – Fred

@Fred對於多個鏈接，你可以這樣做：** http：// jsfiddle。net/9Py9m/1/**，或者如果你想包含一個大的精靈圖表圖像，每一個鏈接懸停/正常狀態，你可以使用相同的圖像，但改變'background-position'座標，如下所示： ** http：//jsfiddle.net/9Py9m/3/** –

再次感謝您的快速響應。看起來你爲我提供的上述例子是一個'高達標準'的網頁瀏覽器。 Unfortunatley，我現在只能在我的位置使用IE8。我應該嘗試與最新版本的IE或FF的鏈接嗎？ – Fred

@Nick [R

感謝尼克！我跟着從上面的JSFIDDLES您的例子，由下面找到一個解決我的問題如下：

HTML

<ul> 
<li class="Google"> 
    <a href="#">Google</a> 
</li> 
<li class="Bing"> 
    <a href="#">Bing</a> 
</li> 
</ul>

CSS

ul { 
    width:260px; 
    position: fixed; 
    left: 1px; 
    top: 200px; 
    z-index: 1 
} 

li { 
    margin-bottom:5px; 
} 

li a { 
    text-indent:-9999em; /* hide our text */ 
    display:block; 
    height:44px; 
} 

li.Google a { 
    background: url('images/google.png') 0px 0px; 
    no-repeat 0 0; 
} 

li.Google a:hover { 
    background-position: -260px 0px; 
} 

li.Bing a { 
    background: url('images/google.png') -520px 0px; 
    no-repeat 0 0; 
} 

li.Bing a:hover { 
    background-position: -779px 0px; 
}

再次感謝！ 豎起大拇指

來源

2014-01-15 15:11:51 Fred

創建CSS雪碧：懸停滾過圖片鏈接

回答

相關問題