Javascript Jquery鼠标悬停精灵

您好，如何编写一个jquery代码，用于对价格评级进行评级？下面是图片的截图

此代码的html代码如下所示：

<fieldset id="price_choices">
        <legend class="offscreen">Price Range:</legend>
            <p class="offscreen">Price per person:</p>
        <ul class="clearfix price-1">
            <li>
                <input type="radio" id="price-1" name="RestaurantsPriceRange2" value="1">               <label for="price-1" class="offscreen">

                </label>
            </li>
            <li>
                <input type="radio" id="price-2" name="RestaurantsPriceRange2" value="2">               <label for="price-2" class="offscreen">

                </label>
            </li>
            <li>
                <input type="radio" id="price-3" name="RestaurantsPriceRange2" value="3">               <label for="price-3" class="offscreen">

                </label>
            </li>
            <li>
                <input type="radio" id="price-4" name="RestaurantsPriceRange2" value="4">               <label for="price-4" class="offscreen">

                </label>
            </li>
        </ul>
    </fieldset>

#price_choices ul {
padding: 0 7px;
height: 28px;
background: url(../images/dollars.gif) 0 0 no-repeat;
}
#price_choices li {
width: 20px;
height: 100%;
overflow: hidden;
}
#price_choices li {
padding: 0;
float: left;
}
#price_choices input {
margin: 0!important;
padding: 0;
border: 0;
cursor: pointer;
width: 100%;
height: 100%;
-moz-opacity: 0;
opacity: 0;

}
#price_choices ul.price-1 {
background-position: 0 -28px;
}
#price_choices ul.price-2 {
background-position: 0 -56px;
}
#price_choices ul.price-3 {
background-position: 0 -84px;
}
#price_choices ul.price-4 {
background-position: 0 -112px;
}

图像sprite$s.gif如下所示：

---

此外，当用户将鼠标悬停在每个li元素上时，美元符号会不断添加，并且当用户单击特定li时，Jquery会提醒该特定li的值。谢谢这一点类似于星级

我正在使用javascript实现类似的功能

我想这对你有帮助

<script type="text/javascript">
            $(function() {

                $('#default').raty();


                $('#half').raty({
                    half    : true,
                    score   : 3.3
                });

                $('#round').raty({
                    score   : 1.26,
                    round   : { down: .25, full: .6, up: .76 }
                });


                $('#precision').raty({
                    half        : true,
                    path        : 'doc/img/', /* the path of your $ images*/
                    precision   : true,
                    size        : 24,
                    starOff     : 'star-off-big.png',//grey image of $
                    starOn      : 'star-on-big.png',//green img of $
                    target      : '#precision-target',
                    targetKeep  : true,
                    targetType  : 'number'
                });



            });
        </script>

$（函数（）{
$（“#默认值”）.raty（）；
$（'一半'）.raty({
一半：是的，
分数：3.3
});
$（“#轮”）.raty({
得分：1.26分，
四舍五入：{向下：.25，完全：.6，向上：.76}
});
$（“#精度”）.raty({
一半：是的，
路径：“doc/img/”，/*您的$images的路径*/
准确度：没错，
尺码：24，
starOff:'starOff big.png'，//的灰色图像$
starOn:'star on big.png'，//绿色img of$
目标：“#精确目标”，
目标保持：正确，
targetType:'编号'
});
});

然后在HTML部分中添加以下内容：

<div id="precision"></div>
<input type="text" id="precision-target" name="txt"/></div><br/>

---

还可以下载jquery.raty.min.js，并将其包含在您的页面中

如果我理解得很清楚的话，类似的东西应该会起作用

$('ul').mouseover(function(){
 var ind = $(this).find('input').val();
 var shift = (ind-2)*28;
 $(this).css('background-position', '0 ' +shift+ 'px');
});

---

网络上有很多资源可以做到这一点。。。有最低限度的搜索吗

---

那么你有没有尝试过什么，或者你只是想让我们为你准备好？@MikeSpy我有一个类似的jquery函数，但它不适用于此，我使用它进行星级评定有很多星级jquery插件。。。你甚至找不到一个适合你的吗？@ByScripts是的，有很多，没有一个使用精灵作为图像。@SaraswathiApavoo我不明白你为什么要使用这样的精灵。它是不可伸缩的（如果明天你决定要5美元，你需要重做图像）。一个好的精灵应该只有一个“开”和一个“关”，根据需要重复。（对不起我的英语）