相关疑难解决方法(0)

我在网上看到了一个教程 - http://www.htmldrive.net/items/show/402/CSS-Star-Rating-System - 用于制作CSS星级评分系统.

在页面上,他们有这个代码:

<ul class="rating">
   <li><a href="#" title="1 Star">1</a></li> 
   <li><a href="#" title="2 Stars">2</a></li>
   <li><a href="#" title="3 Stars">3</a></li>
   <li><a href="#" title="4 Stars">4</a></li>
   <li><a href="#" title="5 Stars">5</a></li>
</ul>

据我所知,这只是一个清单.如何将其集成到我的表单中,以便将星级评定的信息提交到数据库.我目前的表格代码如下:

 <p>Quality</p>
 <input type="radio" name="ratingquality" value="1"> 
 <input type="radio" name="ratingquality" value="2"> 
 <input type="radio" name="ratingquality" value="3"> 
 <input type="radio" name="ratingquality" value="4"> 
 <input type="radio" name="ratingquality" value="5"> 

我有一个有5个内联星的容器.

我需要的是当你将鼠标悬停在恒星,恒星和所有恒星之前获得不同的背景时.(我正在使用精灵,所以我改变了背景位置)

标记:

<div class="wpr"> 
    <span class="star"></span>
    <span class="star"></span>
    <span class="star"></span>
    <span class="star"></span>
    <span class="star"></span>
</div>

如果我使用兄弟组合器(〜)我会得到相反的效果.

.star:hover, .star:hover ~ .star
{
    background-position: 0 -18px;
} 

小提琴

如何在徘徊之前为所有的星星实现这个？