удалите: hover, используя javascript (не используя jquery ... не спрашивайте)

Question

Я думал, что это будет довольно просто .... По сути, это 5-звездочная рейтинговая система. Когда пользователь нажимает, например, три звезды ... Я хочу заморозить эти три звезды там, где они находятся. Я пытался просто убрать зависание для href, чтобы оно оставалось на том же уровне ... возможно, это не правильный метод. Я исчерпал абсолютно все, что могу придумать ... Кстати, это прямой javascript, а не jquery или что-то еще. Это безумие, я знаю, но все JS были написаны прямо ....

У меня есть этот класс:

.star-rating li a{
    display:block;
    width:25px;
    height: 25px;
    text-decoration: none;
    text-indent: -9000px;
    z-index: 20;
    position: absolute;
    padding: 0px;
}
.star-rating li a:hover{
    background: url(images/alt_star.png) left bottom;
    z-index: 2;
    left: 0px;
}
.star-rating a:focus,
.star-rating a:active{
    border:0;   
    -moz-outline-style: none;
            outline: none; 
}
.star-rating a.one-star{
    left: 0px;
}
.star-rating a.one-star:hover{
    width:25px;
}

и этот код:

<ul class='star-rating'>
<li><a href="#" onclick="javascript: vote(<?=$id;?>, 1); disableStars(); return false;" 
           title='1 star out of 5' id="1s" class='one-star'>1</a></li>

Answer 1

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

.not-selected.star-rating a.one-star:hover{
    width:25px;
}

С некоторым javascript удалите класс not-selected, поэтому отключите правило, которое применяется к эффекту наведения.

Answer 2

Если вы хотите удалить поведение :hover из тега привязки, добавьте другой класс без стиля a:hover.