html - css 星级评定 html

Question

我正在关注此页面上的教程: http://www.henryhoffman.com/css-star-rating-tutorial.html HTML 看起来像这样:

<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>

CSS 是这样的:

ul.rating{
background:url(../img/site_img/star.jpg) bottom;
height:21px;
width:115px;
overflow:hidden;
}

ul.rating li{
display:inline
}
.rating a {
display:block;
width:23px;
height:21px;
float:left;
text-indent:-9999px;
position:relative;
}
.rating a:hover {
background:url(../img/site_img/star.jpg) center;
width:115px;
margin-left:-92px;
position:static;
}
.rating a:active {
background-position:top;
}

我的问题是我不想要一个 href，我不想被转移到页面上的另一个位置。我只想将值(1、2、3、4 或 5)存储在标签中，这样我就可以在按下按钮时将该值传递给数据库。如果我选择三颗星，我希望三颗星在按下星星后变色，不再吸尘。

我该怎么做？

Answer 1

我认为您可以将 a hrefs 更改为 span，因为 CSS 已经声明了一个 display:block 这应该可以工作。同样在 CSS 中将 rating a 更改为 rating span 看看是否有帮助。

<ul class="rating">
<li><span>1</span></li>...

.rating span {
display:block;...