Question

我知道如何让我的评级星总是悬停，具体取决于平均评分结果（随机生成的数字从1-5开始，随机生成的数字从10-55开始投票）？我可以在我的明星上用jQuery模拟悬停吗？我看到几个类似问题的解决方案，但没有在他们的CSS中使用General Sibling Selector（〜）。

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

这是一个说明我的问题的小提琴：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) {

}

Answer 1

最简单的方法是使用JavaScript来检测悬停，并在悬停/放出时添加/删除“悬停”或“活动”类。然后，CSS可以使用.rating-star.hover或类似内容而不是:hover。通过这种方式，您可以使用JavaScript将您选择的类应用于其中没有任何星星悬停的适当星数。

清除泥土？

模拟悬停评级星（用css中的选择器制作）

1 个答案: