Создание системы звездного рейтинга с дизайном CSS?

Я пытаюсь создать систему звездного рейтинга, в которой пользователи могут наводить курсор на звезды, чтобы оценивать других пользователей.

Сейчас я просто хочу сосредоточиться на стороне дизайна CSS. Я знаю, как я могу добиться, чтобы звезды исчезали, когда пользователь наводит указатель мыши, используя непрозрачность в css для каждого изображения, но как я могу сделать так, чтобы, если пользователь наводит курсор на 2-ю или третью звезду, предыдущие звезды также растворился вместе с ним?

Любые советы или советы будут оценены. Ниже приведено то, что у меня есть до сих пор, которое просто устанавливает непрозрачность каждого отдельного изображения, но хотел бы знать, как заставить его работать, как уже упоминалось, чтобы звезды 1, 2 и 3 исчезали, если пользователь наводит курсор на звезду 3.

.star {
    position: absolute;
    width: 200px;
    text-align: right;
    margin-top: 0px;
    margin-left: 189px;
    cursor: pointer;
    opacity:0.2;

    }

.star:hover {
    position: absolute;
    width: 200px;
    text-align: right;
    margin-top: 0px;
    margin-left: 189px;
    cursor: pointer;
    opacity:1.0;

    }

css rating
person Mark Taylor    schedule 19.12.2012    source источник
comment
fwiw, вам не нужно повторно объявлять каждое правило в :hover, только то, что переопределяется (в вашем случае opacity)   -  person ultranaut    schedule 19.12.2012

Ответы (1)


arrow_upward
3
arrow_downward

Я бы сделал это следующим образом (используя общий комбинатор родственных элементов ~)

<ul class="stars">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

и

.stars li{
    float:left;
    width:20px;
    height:20px;
}
.stars:hover li{
   background-color:red; // or set a background image of SELECTED star
}
.stars li,
.stars li:hover ~ li{
    background-color:#ccc;// or set a background image of unselected star
}

Демо на http://jsfiddle.net/gaby/PJWZY/1/

Я играл с background-color. То же самое относится и к непрозрачности.

Демонстрация непрозрачности на http://jsfiddle.net/gaby/PJWZY/2/

person Gabriele Petrioli    schedule 19.12.2012