Question

我正在尝试实施星级评分系统并拥有以下代码：

<div class="rating" style="font-size:xx-large;text-align:center;">
  <h3>Please give this course a star rating:</h3>
  <span onclick="Stars(5)">☆</span><span onclick="Stars(4)">☆</span><span onclick="Stars(3)">☆</span><span onclick="Stars(2)">☆</span><span onclick="Stars(1)">☆</span>
</div>

我还有以下关于在悬停时设置图标样式的CSS：

.rating > span {
  display: inline-block;
  position: relative;
width: 1.1em;
}

.rating > span:hover,
.rating > span:hover ~ span {
  color: transparent;
}

.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
   left: 0; 
   color: gold;
}

我的jQuery代码如下：

function Stars(id) {
    if (id == 1)
        alert("YOU RATED THIS 1 STAR");
    else
        alert("YOU RATED THIS " + id + " STARS");
}

我的问题是我无法找到一种方法在点击时将颜色设置为金色，因为当我将其悬停时，则重置星形颜色。我试图添加一个onlick事件来获取每个星星的数量，所以目前我只返回一个警告说你点击1星，你点击2星等。

我可以看到伪类如何用于悬停颜色我如何使用onclick的类似功能？任何帮助将不胜感激

捕获跨度的位置并在之前单击时设置样式

0 个答案: