css 星级 html答案

【问题标题】：css Star-rating htmlcss 星级 html
【发布时间】：2013-11-07 00:19:12
【问题描述】：

我正在关注此页面上的教程： 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）存储在标签中，以便在按下按钮时将该值传递给数据库。如果我选择三颗星，我希望在按下星星后对三颗星进行着色，并且不再将星星悬停。

我该怎么做？

【问题讨论】：

标签： html css

【解决方案1】：

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

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

.rating span {
display:block;...

【讨论】：

是的，这行得通，我不会被调职。我将尝试看看如何保存 Span 值以及如何使选择变为彩色，即使我不悬停鼠标。

【解决方案2】：

这很相似，应该让你走上正轨。有几个函数我在这里没有包括，但是基础是你可以使用的。

这里是小提琴：http://jsfiddle.net/n76My/5/

var index=1;
$(".beeRating li").on({
mouseover: function() {
    if(index==1)
    {
      $(this).addClass('stop');
      $("li").each(function(index,domEle) {
      $(domEle).css('opacity', '1');
      if( $(this).hasClass('stop') ) {
        return false;
    }
})
}
},

 mouseleave: function() {
 if(index==1)
{
$(this).removeClass('stop');
$("li").each(function(index,domEle) {
    $(domEle).css('opacity', '.25');
})
}
},
click: function() {
var rating = $(this).attr('id');
console.log(rating);
index=0;
$.ajax({    // do ajax request
   url: "/echo/json/"

   }).done(function() {
      alert("success");
      index=1;  // on done set the index as 1
    });
   }
});

【讨论】：