CSS 성급의 HTML 페이지에 대한 자습서 다음

Question

임 다음 HTML은 다음과 같습니다 http://www.henryhoffman.com/css-star-rating-tutorial.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; 
} 

내 문제는 내가 dont는 href를 원한다, 나는 페이지의 다른 소유지로 옮겨지고 싶지 않다. 값을 (1, 2, 3, 4 또는 5) 레이블에 저장하면 단추를 누를 때 그 값을 데이터베이스에 전달할 수 있습니다. 그리고 내가 3 개의 별을 선택하면, 3 개의 별이 눌러 진 별들 뒤에 colured되기를 원하고, 더 이상 별들을 후버하지 마라.

어떻게하면됩니까?

Answer 1

a hrefs을 CSS로 이미 변경했다고 생각하면 CSS가 이미 display:block이라고 선언 된 것으로 간주됩니다. 또한 CSS 변경시 rating a에서 rating span까지 도움이되는지 확인하십시오.

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

.rating span { 
display:block;... 

Answer 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 
    }); 
    } 
});