0

我会知道如何根据平均评分结果（从 1-5 随机生成的数字和从 10-55 随机生成的数字作为投票数）让我的评分星始终悬停？我可以用 jQuery 在我的星星上模拟悬停吗？我看到类似问题的解决方案很少，但没有在他们的 css 中使用 General Sibling Selector (~)。

星形悬停功能必须是纯 CSS。其他所有东西都可以并且在 js(jQuery) 中。当文档加载时，一些星星应该已经悬停（取决于随机平均数），并且当用户点击星星时，新值也应该影响悬停的星星。

这是一个说明我的问题的 js 小提琴：http: //jsfiddle.net/kingSlayer/8ZbxB/

CSS

div.rating-star{
   display:inline-block;
   width:30px;
   height:30px;
   background-image: url(star.png);   
   background-size: contain;
   background-repeat: no-repeat;
}

div:hover div.rating-star {
   background-image: url(star-hover.png);   
   background-size: contain;
   background-repeat: no-repeat;
}

div.rating-star:hover ~ div.rating-star {
   background-image: url(star.png);   
   background-size: contain;
   background-repeat: no-repeat;
}

HTML

<div id="showRating"></div>

<div class="rate_stars">
   <div id="one" class='rating-star' onclick="rating(1);"></div>
   <div id="two" class='rating-star' onclick="rating(2);"></div>
   <div id="three" class='rating-star' onclick="rating(3);"></div>
   <div id="four" class='rating-star' onclick="rating(4);"></div>
   <div id="five" class='rating-star' onclick="rating(5);"></div>
</div>

JavaScript

var averageRate = (Math.random() * 4) + 1;
$('#showRating').text('Average rating: ' + averageRate.toFixed(1));


var numberOfRates = Math.floor((Math.random() * 55) + 1);

function rating(rate) {

    var result = ((averageRate * numberOfRates) + rate) / (numberOfRates + 1);

    $('#showRating').text('Average rating: ' + result.toFixed(1));
}


if (result <= 1.4) {

}
if (result > 1.4 && result <= 2.4) {

}
if (result > 2.4 && result <= 3.4) {

}
if (result > 3 && result <= 4.4) {


}
if (result > 4.4) {

}
4

1 回答 1

1

最简单的方法是使用 JavaScript 来检测悬停，并在悬停时添加/删除“悬停”或“活动”类。然后 CSS 可以使用.rating-star.hoveror 类似的而不是:hover. 这样，您可以使用 JavaScript 将您选择的类应用到适当数量的星星上，而这些星星都没有悬停在上面。

清如泥？

于 2013-07-26T14:10:45.443 回答