CSS 5星级评分系统，星级问题

我创建了一个5星评级系统。我的CSS设置为显示固定在屏幕上的灰色背景星星。当出现蓝色星星盘旋时，虽然这些星星居中并伸出，例如当我选择一颗星时，中间星变成黄金而不是最左边的灰星，同样，如果我选择2颗星，两颗金星出现在第二和第四颗灰星，灰色星星在背景中仍然可见。这看起来很不整洁。CSS 5星级评分系统，星级问题

任何人都可以告诉我如何改变我的代码来转换选择黄金的实际星星？

我的星星图片是stars.png，其中一张图片分别有灰色，蓝色和金色星星。

我对css的知识有限。我试图改变CSS的一个接一个，例如宽度或像素的多个组件，但无济于事。

这是我的CSS。

form .stars { 
    background: url("stars.png") repeat-x 0 0; 
    width: 150px; 
    margin: 0 auto; 
} 

form .stars input[type="radio"] { 
    position: absolute; 
    opacity: 0; 
    filter: alpha(opacity=0); 
} 
form .stars input[type="radio"].star-5:checked ~ span { 
    width: 100%; 
} 
form .stars input[type="radio"].star-4:checked ~ span { 
    width: 80%; 
} 
form .stars input[type="radio"].star-3:checked ~ span { 
    width: 60%; 
} 
form .stars input[type="radio"].star-2:checked ~ span { 
    width: 40%; 
} 
form .stars input[type="radio"].star-1:checked ~ span { 
    width: 20%; 
} 
form .stars label { 
    display: block; 
    width: 30px; 
    height: 30px; 
    margin: 0!important; 
    padding: 0!important; 
    text-indent: -999em; 
    float: left; 
    position: relative; 
    z-index: 10; 
    background: transparent!important; 
    cursor: pointer; 
} 
form .stars label:hover ~ span { 
    background-position: 0 -30px; 
} 
form .stars label.star-5:hover ~ span { 
    width: 100% !important; 
} 
form .stars label.star-4:hover ~ span { 
    width: 80% !important; 
} 
form .stars label.star-3:hover ~ span { 
    width: 60% !important; 
} 
form .stars label.star-2:hover ~ span { 
    width: 40% !important; 
} 
form .stars label.star-1:hover ~ span { 
    width: 20% !important; 
} 
form .stars span { 
    display: block; 
    width: 0; 
    position: relative; 
    top: 0; 
    left: 0; 
    height: 30px; 
    background: url("stars.png") repeat-x 0 -60px; 
    -webkit-transition: -webkit-width 0.5s; 
    -moz-transition: -moz-width 0.5s; 
    -ms-transition: -ms-width 0.5s; 
    -o-transition: -o-width 0.5s; 
    transition: width 0.5s; 
}

来源

2016-03-07 scubbastevie

嗯，你可以删除的行号？ –

Hi @JacobGray。我已根据要求删除了行号。他们没有按照我的实际代码 – scubbastevie

本质上，它归结为更改'background-position'属性。您移动背景图像，以便显示您想要显示的恒星的“状态”。我无法提供确切的代码，因为我不知道你的星形精灵是什么样的。 – Scott

这是一个更紧凑的解决方案，以5星评级的代码。它涉及到倒车使用相邻选择器的工作方式：

unicode-bidi: bidi-override; 
direction: rtl;

此演示使用一个简单的字体这使得它比传统的<img>或精灵更快，作为字体，它受color，font-size，font-style，等等。

阅读article了解详情。

Plunker

片段

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset='UTF-8'> 
 
    <title>Star Ratings</title> 
 
    <style> 
 
    .rate { 
 
     unicode-bidi: bidi-override; 
 
     direction: rtl; 
 
     text-align: center; 
 
    } 
 
    .rate> span { 
 
     display: inline-block; 
 
     position: relative; 
 
     width: 1.1em; 
 
    } 
 
    .rate > span:hover, 
 
    .rate > span:hover ~ span { 
 
     color: transparent; 
 
    } 
 
    .rate > span:hover:before, 
 
    .rate > span:hover ~ span:before { 
 
     content: "\2605"; 
 
     position: absolute; 
 
     left: 0; 
 
     color: gold; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <aside class="rate"> 
 
    <span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span> 
 
    </aside> 
 
</body> 
 

 
</html>

来源

2016-03-08 00:54:37 zer00ne

你好@ zer00ne试过这个，但是星星不显示，因为我的页面的其余部分是用css设置的。我只是在明星应该在的地方得到奇怪的符号 – scubbastevie

为了说明在悬停时出现的恒星会出现，但是在正常状态下假设的星星出现时出现顶部带有“〜”符号的“a” – scubbastevie

您是否使用了确切的代码我提供了？或者你是否已经将代码的重要部分加入到了页面中？如果是后者，那么我怀疑你的页面需要这个'''' – zer00ne

CSS 5星级评分系统，星级问题

回答

相关问题