css星级html [英] css Star-rating html

问题描述

按照此网页上的教学课程：
http：/ /www.henryhoffman.com/css-star-rating-tutorial.html 其中的HTML如下所示：

Im following a tutorial on this page: http://www.henryhoffman.com/css-star-rating-tutorial.html where the HTML looks like this:

<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）存储在标签中，这样当我按下按钮时，我可以将该值传递到数据库。如果我选择三颗星，我想要三颗星在按下星星后不再流淌在星星上。

My problem is that I dont want an a href, I don't want to be transferd to another possition on the page. I just want the the value (1, 2, 3, 4 or 5) to be stored in a label so I can pass that value to the database when I press a button. And if I choose three stars I want three stars to be colured after a pressed the stars and dont hoover the stars anymore.

我该怎么做？

推荐答案

我认为你可以将 a hrefs 看到CSS已经声明一个 display：block 这应该工作。还在CSS更改评级a 到评级span 看看是否有帮助。

I think you can just change your a hrefs into spans, seeing as the CSS already declared a display:block this should work. Also in CSS change rating a to rating span See if that helps.

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

.rating span {
display:block;...

这篇关于css星级html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！