별 5 개 등급 기능

debugcn 에 게시 Dev

주도

CSS를 사용하여 별 5 개 등급 기능을 달성하려면 어떻게해야합니까?

일부 HTML이 있습니다.

<span class="rate-this-stars">
  <h5>Rate this page</h5>
  <ol class="rate-this-stars-list">
    <li class="star" value="5"></li>
    <li class="star" value="4"></li>
    <li class="star" value="3"></li>
    <li class="star" value="2"></li>
    <li class="star" value="1"></li>
  </ol>
</span>

그리고 나에게 이것을 제공하는 몇 가지 추가 CSS :

이 페이지 평가

그런 다음 회색 별을 분홍색 별과 바꾸는 CSS 호버 상태가 있습니다.

span.stars ol li:hover {
  background-image: url(../images/starHover.png);
}

산출:

별표 하나만 사용하여이 페이지 평가

그래서 분명히 이것은 내가 맴돌고있는 별에만 영향을 미칠 것입니다. 하지만 별 4 위로 마우스를 가져 가면 별 1, 2, 3, 4를 어떻게 강조 할 수 있을지 궁금했습니다. 따라서 선택한 별을 시험하는 모든 별을 강조 표시합니다.

또한 클릭 이벤트가 발생하면 별표를 분홍색으로 유지하고 싶습니다. 나는 기본적으로 CSS와 자바 스크립트없이 이것을하고 싶습니다.

내 CSS 기술은 약간 녹슬 었습니다. 이 기능을 수행하는 방법에 대한 제안.

크래커

알았어

등급을 얻기위한 자바 스크립트

$(document).ready(function() {
    $("form#ratingForm").submit(function(e) 
    {
        e.preventDefault(); // prevent the default click action from being performed
        if ($("#ratingForm :radio:checked").length == 0) {
            $('#status').html("nothing checked");
            return false;
        } else {
            $('#status').html( 'You picked ' + $('input:radio[name=rating]:checked').val() );
        }
    });
});

데모 1

CSS DEMO2 사용

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-1

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사