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

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

星空盘旋funcionality必须在纯粹的CSS。其他所有东西都可以并且在js（jQuery）中。当文件载入一些恒星时，应该已经徘徊（取决于随机平均数），而当用户点击恒星时，新值也应该影响恒星。

这是说明我的问题一个js小提琴：

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) { 

}

来源

2013-07-26 kingSlayer

最简单的方法是http://jsfiddle.net/kingSlayer/8ZbxB/

CSS使用JavaScript检测悬停，并在悬停/悬停时添加/移除“悬停”或“活动”类。那么CSS可以使用.rating-star.hover或类似的代替:hover。通过这种方式，您可以使用JavaScript将您选择的类应用到适当数量的恒星上，而这些恒星中没有任何一个被悬空。

清除泥？

来源

2013-07-26 14:10:45 SmokeyPHP

谢谢你为我工作， – kingSlayer

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

回答

相关问题