模拟悬停评级星星（用CSS中的选择器制作） [英] Simulate hover rating stars (made with selectors in css)

问题描述

我会知道如何根据平均评分结果（从1-5的随机生成数和从10-55的随机生成数得到的选票数）来让我的评分星永远悬停？我可以使用jQuery在我的明星上模拟悬停吗？我看到了类似问题的解决方案，但没有在他们的CSS中使用通用兄弟选择器（〜）。

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

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

CSS

  div.rating-star {
显示：inline-block; 
 width：30px; 
 height：30px; 
 background-image：url（star.png）; 
 background-size：包含; 
背景重复：不重复; 
} 
 
 div：hover div.rating-star {
 background-image：url（star-hover.png）; 
 background-size：包含; 
背景重复：不重复; 
} 
 
 div.rating-star：hover〜div.rating-star {
 background-image：url（star.png）; 
 background-size：包含; 
背景重复：不重复; 
 
  

HTML

 < div id =showRating>< / div> 
 
< div class =rate_stars> 
< div id =oneclass ='rating-star'onclick =rating（1）;>< / div> 
< div id =twoclass ='rating-star'onclick =rating（2）;>< / div> 
< div id =threeclass ='rating-star'onclick =rating（3）;>< / div> 
< div id =fourclass ='rating-star'onclick =rating（4）;>< / div> 
< div id =fiveclass ='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）; 
 
函数评级（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&& result< = 3.4）{
 
} 
 if（< = 2.4）{
 
} 
 if （结果> 3&& result< = 4.4）{
 
 
} 
 if（result> 4.4）{
 
} 
  

解决方案

最简单的方法是使用JavaScript来检测悬停，并在悬停/悬停添加/删除悬停或活动类。然后CSS可以使用 .rating-star.hover 或类似的代替：hover 。通过这种方式，您可以使用JavaScript将您所选择的类应用到适当数量的明星上，而这些明星中没有任何一个被悬空。

清除泥浆？

I would know how to make my rating star always hover depending on the average rating result (random generated number from 1-5 and random generated number from 10-55 for the number of votes)? Can I simulate hover with jQuery on my star? I saw few solutions to similar problems but none used in their css the General Sibling Selector (~).

The star hover funcionality must be in pure css. Everything other can be and is in js(jQuery). When the document loads some stars should already be hovering(depeding on the random average number), and when the user clicks on the star the new value should also affect the hovering stars.

Here is a js fiddle illustrating my problem: 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) {

}

解决方案

The easiest way would be to use JavaScript to detect the hover, and on hover in/out add/remove a "hover" or "active" class. CSS can then use .rating-star.hover or similar instead of :hover. This way you can use JavaScript to just apply the class of your choice to the apt number of stars when none of them are being hovered over.

Clear as mud?

这篇关于模拟悬停评级星星（用CSS中的选择器制作）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！