css - 选择星级时防止页面返回顶部

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