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

Hi User2961763

top:-9999px; .rating:not(:checked) > input似乎导致了问题。如果您评论或删除此样式，它将工作正常，但您还需要注意它不会影响您的其他功能。希望它有助于

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

选择星级时，阻止页面返回顶部

1 个答案: