如何在CSS精靈圖像上做懸停效果？

我正在使用一個精靈圖像。對於懸停效果，精靈上的每個圖標都具有相同但不同的顏色。那麼當我將鼠標懸停在圖標上時，懸停效果就起作用了。但我想獲得懸停（更改圖像）div的鼠標懸停，而不是跨度。（因爲跨度寬度指定爲圖標大小，我找不到解決方案）如何在CSS精靈圖像上做懸停效果？

如果您請檢查以下css和html，您將瞭解我需要什麼。我想讓「search_forums」（span）圖標在「each_option」div mouseover上更改。

在此先感謝

CSS

.each_option{ 
height:30px; 
border-bottom:1px solid #ffe869; 
font-size:14px; 
padding-top:9px; 
color:#707070;} 

.forumdisplay_sprite{ 
background-image:url(../img/forumdisplay_sprite.png); 
background-repeat:no-repeat; 
display:block; 
text-indent:-99999px; 
overflow:hidden;} 

.search_forums{height:24px;width:24px;background-position:-24px -48px;} 

.search_forums:hover{height:24px;width:24px;background-position:-24px -72px;}

HTML

<div class="each_option"> 
<span class="forumdisplay_sprite search_forums"></span> 
<a href="#">Search Forums</a> 
</div>

雪碧圖標 Sprite icons image

對不起，不夠清楚。我原來的/以前的風格就像下面給出的頁面一樣。然後在閱讀關於更好的CSS和優化的文章後，我決定使用精靈圖像。但我有這個問題...

這裏是我想怎樣做：http://jsfiddle.net/stckhlm/EXZKa/

是否有可能得到懸停（改變包裝div的背景顏色和內部div的背景圖像同時進行）像效果上面的例子？如果沒有，那麼我將不得不停止使用精靈圖片或懸停效果...

來源

2012-08-31 Seamus

.each_option:hover .search_forums{//enter your hover changes here.}

不是100％肯定，如果我理解你以後在做什麼 - 但上面的代碼應該做的伎倆如果您希望在each_option懸停時更改search_forums樣式。

來源

2012-08-31 22:52:42

這就是你所追求的權利？

http://jsfiddle.net/j4nf4/1/

不確定爲什麼你提供不呈現圖像，從而發現了另一個精靈。

爲什麼你想要一個跨度在錨？對我來說這沒有意義。

如果你想在DIV懸停效果的CSS應該是你的情況：

.each-option:hover { 
Your styling here

}

確保，如果你設置的div，跨度，段落等的懸停狀態，你將光標更改爲指針：cursor: pointer;，以便用戶知道該區域是可點擊的。

希望這會有所幫助！

來源

2012-08-31 23:55:06 Filth

如何在CSS精靈圖像上做懸停效果？

回答

相關問題