如何在此代码css html中完成像评级星一样的悬停效果？ [英] how can I do the hover effect like a rating star in this code css html?

问题描述

对于此评级代码，我有一个悬停问题。如果转到第二个圆，则前两个突出显示，转到第三个，前三个突出显示。我知道我应该使用+〜>，但是我只是不太了解如何使用这些实现我想要的东西。欣赏。点击并查看代码。

I had a problem to do the hover thing for this rating code. If it go to the second circle, the first two will highlight, go to third, the first three will highlight. I know I should use + ~ >, but I just don't really understand how to use these to achieve what I want. Appreciate. click and see the code.

#rating_bar{
	width:100px;
	height:100px;
	margin: 4px 175px !important;    
    display:inline-block;
    display:inline;
}

#rating_bar > span:before{
	 content:'O';
     color: #c7c5c5;
	 cursor:pointer;
    font-size:3em;
	 
}
#rating_bar > span:hover:before {
   
	color: #4bce32;

}

<div id="rating_bar">
			    <span id="rate_1"></span>
			    <span id="rate_2"></span>
			    <span id="rate_3"></span>
			    <span id="rate_4"></span>
			    <span id="rate_5"></span>

			</div>

推荐答案

我已经更改了几个选择器，将向您解释幕后的情况...

I've changed your couple of selectors, will explain you whats going on behind the scenes...

#rating_bar:hover > span:before {
    color: #4bce32;
}

#rating_bar > span:hover ~ span:before {
    color: #c7c5c5;
}

演示

说明：

我正在做的是将鼠标悬停在 #rating_bar 包装器上，将所有0都涂成绿色，而不是将鼠标悬停在一个特定的0上，然后用灰色为尾随的那些着色..希望能为您解释。.

What I am doing is on hover of the #rating_bar wrapper am coloring all the 0's to green and than on hover of a specific 0 I am coloring the trailing ones with grey.. I hope that explains you..

这篇关于如何在此代码css html中完成像评级星一样的悬停效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！