удалить a: 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.