Question

我认为这很简单......基本上，它是一个五星评级系统。例如，当用户点击三颗星时......我想将这三颗星冻结在它们所在的位置。我一直试图简单地删除悬停为一个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样式的类。

删除a：使用javascript悬停（不使用jquery ...不要问）

2 个答案: