删除a：悬停使用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样式的类。