javascript - 在div上添加类 mouse enter mouse leave and click

Question

我想要实现的是，我想让它像星级评定一样工作。当你进入鼠标时，星星变成黄色，当你离开鼠标时，它变成灰色，然后如果你再次点击它变成黄色。 不知道如何实现它，我添加了代码来向您展示我到目前为止所做的尝试。

JSfiddle

$(".na").hover(
  function () {
    $(this).addClass("clickstar");
  },
  function () {
    $(this).removeClass("clickstar");
  }
);
$(".na").on("click",function(){
  $(this).toggleClass("clickstar");
});

.clickstar{
  background: #00A1EF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="na" style="border:1px solid #c0c0c0;border-radius:50%;width:115px;height:115px;display:inline-table;margin-right:5px;"></div>

Answer 1

您应该考虑使用 2 个不同的类，.hoverstar 和 .clickstar，然后:

http://jsfiddle.net/xLxbw216/1/

每个案例都有一个类，这看起来更合乎逻辑？

您还可以通过删除 .hover() 方法并使用 CSS 来简化它:

http://jsfiddle.net/xLxbw216/8/

我可能会选择第二个，即使第一个解决方案似乎更“可读”。