在懸停狀態下使用裏面的精靈圖像

我有一個圖像保存爲精靈（星號），最初用於改變懸停狀態的顏色。我想調整它的用途，例如根據班級名稱來顯示X數量的星星。在懸停狀態下使用裏面的精靈圖像

我明白改變背景位置將改變，其圖像顯示在懸停，因爲圖像被垂直地坐着。

例

.sprite { 
width:46px; 
height:44px; 
background:url(image.gif) 0px 0px; 
}   

.sprite:hover{ 
    background: url(image.gif) 0px 44px; 
}

我希望能夠重複圖像以顯示上示出將分hover..the量分，1，2，3或4×量一定的長度權預先定義，這可能嗎？

目前我已經顯示了4星級的那如何在div內的許多適合，如果我的格是更廣泛的那麼多的明星將被顯示的例子。

我做了一個JSFiddle有兩個例子，第一個是我用普通的div來表示我想要實現的，第二個是使用li元素，它是我正在努力的一個元素。

來源

2013-06-23 Richlewis

你可以使用好的[CSS星級評分]（http://www.komodomedia.com/blog/2007/01/css-star-rating-redux/）插件。 – Shaddow

我不能完全肯定你會在這裏的，但在這裏與在<li>工作示例小提琴：

http://jsfiddle.net/nsFRq/3/

下面是代碼：

$('.rateable').hover(function() { 
    $(this).find('.text').stop().hide(); 
    $(this).find('.rate').stop().animate({ 
     left: 400, 
     opacity: "show" 
    }, 1500); 
}, function() { 
    $(this).find('.rate').stop().hide(); 
    $(this).find('.text').stop().fadeIn(1000); 
});

來源

2013-06-23 19:56:40 musicnothing

謝謝你，好吧，如果我只想要3個星星來顯示懸停而不是4，我會怎麼做，同時保持81px的寬度？ – Richlewis

查看@ GCyrillus的回答。 – musicnothing

您可以使用班級和多種背景： http://jsfiddle.net/qvAPz/3/

.rate50 { 
    background: 
     url('https://s3-eu-west-1.amazonaws.com/richlewisprofile/assets/images/rate.png') 40px -24px no-repeat, 
     url('https://s3-eu-west-1.amazonaws.com/richlewisprofile/assets/images/rate.png') 60px -24px no-repeat, 
     url('https://s3-eu-west-1.amazonaws.com/richlewisprofile/assets/images/rate.png'); 
}

來源

2013-06-23 20:05:28

元素的高度不能超過你的精靈中一顆星星的高度，否則你會看到兩顆星星（金黃色和灰色）。因爲你的img，這個高度約爲20px。你可以重新排列你的精靈，在精靈之間提供更多的空間:) –

在懸停狀態下使用裏面的精靈圖像

回答

相關問題