Question

我想要实现的是，我想让它像星级评级一样工作。当你输入鼠标星变为黄色时，当你离开鼠标它变成灰色然后如果你再次点击它变成黄色。没有得到如何实现它，我已经添加了代码，以显示我到目前为止尝试了什么。

＆＃13;

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

＆＃13;

.clickstar{
  background: #00A1EF;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

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

每个案例都有一个类，这似乎更符合逻辑？

您还可以通过删除.hover（）方法使其变得更简单，并使用CSS执行此操作：

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

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

Answer 2

你可以这样做：

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

<强> Fiddle Example

Answer 3

你应该使用不同的类来永久开始和悬停星

我在JSfiddle

中创建了一个工作示例

$(".na").hover(
  function () {
      var $this = $(this);
      if (!$this.hasClass("permstar")) {
          $this.addClass("clickstar");
      }
  },
  function () {
      var $this = $(this);
      if (!$this.hasClass("permstar")) {
          $(this).removeClass("clickstar");
      }
  }
);
$(".na").on("click",function(){
    $(this).toggleClass("permstar");
});

Answer 4

在悬停事件中添加/删除类与点击事件相冲突，因此我已将悬停功能移至css

<强>的CSS：

.clickstar{
background: #00A1EF;
}
.na:hover{
 background: #00A1EF;
}

现场演示：

http://jsfiddle.net/dreamweiver/xLxbw216/7/

快乐编码：）

在div鼠标上添加类进入鼠标左键并单击

4 个答案: