CSS星级评定HTML

林下面这个页面上的教程： http://www.henryhoffman.com/css-star-rating-tutorial.html在HTML看起来像这样：CSS星级评定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，我不想被转移到页面上的另一个possition。我只想将值（1,2,3,4或5）存储在标签中，以便在按下按钮时将该值传递给数据库。如果我选择了三颗星星，我希望三颗星星在星星被压下之后变得更加鲜艳，并且不再让星星变成了星星。

我该怎么做？

来源

2010-05-27 Nicklas

我认为你可以将你的a hrefs改成跨度，看到CSS已经声明display:block这应该工作。也在CSS更改rating a到rating span看看是否有帮助。

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

.rating span { 
display:block;...

来源

2010-05-27 12:45:16 Kyle

是的，这工作，我不明白transferd。我将尝试看看如何保存跨度值，以及如何让选择变得更加鲜艳，即使我不拖动鼠标。 – Nicklas 2010-05-27 12:53:39

这个我相似，应该让你走上正轨。有几个功能我不包括在这里，但基地在那里供您使用。

这里是小提琴：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 
    }); 
    } 
});

来源

2013-11-06 16:19:12

CSS星级评定HTML

回答

相关问题