選擇星級時，防止頁面返回頂部

Question

我找到了一個代碼來幫助您將鼠標懸停在它們上方來更改星星顏色。它像一個魅力。但是，當我點擊明星來修復評分時，它會將我發送到頁面的頂部。星星稍微位於頁面的底部，所以點擊一個星星並最終到達頂部並且不得不再次向下滾動。 頁面未刷新。它只是把我送到最高層。有沒有一種方法可以防止這種情況發生，並允許用戶點擊星星並保留在星星所在的頁面上？

HTML

<fieldset class="rating"> 
<legend>Please rate:</legend> 
<input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label> 
<input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label> 
<input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label> 
<input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label> 
<input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label> 
</fieldset> 

下面是完整的代碼： jsfiddle

感謝

Answer 1

DEMO

User2961763嗨

看來top:-9999px;對.rating:not(:checked) > input造成問題。如果你評論或刪除這種風格，它會正常工作，但你也需要注意它不會影響你的其他功能。希望它幫助

.rating:not(:checked) > input { 
    position:absolute; 
    /* top:-9999px; */ 
    clip:rect(0,0,0,0); 
}