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

回答

相關問題