CSS 5 звездная система Система, номер звезды

Я создал систему оценки 5 звезд. Мой css настроен для отображения серых фоновых звезд, которые фиксируются на экране. Когда они витают над синими звездами, хотя эти звезды центрированы и простираются, например, когда я выбираю 1 звезду, средняя звезда превращается в золото вместо левой самой серой звезды, так же, если я выбираю 2 звезды, появляются две золотые звезды между второй и четвертой серых звезд, а серые звезды все еще видны на заднем плане. Это выглядит очень неопрятно.CSS 5 звездная система Система, номер звезды

Может ли кто-нибудь посоветовать, как я могу изменить свой код, чтобы превратить настоящие звезды, которые выбраны золотом?

Мои изображения звезд - это звезды.png, у которых есть серая, синяя и золотая звезда соответственно на одном изображении.

Мои знания о css ограничены. Я попытался изменить несколько компонентов css один за другим, такие как ширина или px, но безрезультатно.

Вот мой 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

Чтобы прояснить, что звезды появляются при наведении курсора, но символ «а» с символом «~» сверху отображается, когда предполагаемые звезды в нормальном состоянии – scubbastevie

Используете ли вы точный код Я предоставил?Или вы взяли важные части кода, а затем интегрировали его в свою страницу? Если последнее, то я подозреваю, что ваша страница нуждается в этом '' в '' – zer00ne

CSS 5 звездная система Система, номер звезды

ответ

Смежные вопросы