jquery - jquery点击功能悬停后不起作用

Question

我最近开始学习 jQuery，现在我被这个问题困住了，一切都按预期工作，但在点击功能执行 jquery 悬停功能后不起作用......

$(function(){
    $("div.star").hover(function(){
        $(this).addClass("star-hover");
    });

    $("div.star").mouseout(function(){
        $(this).removeClass("star-hover");
    );
});

$(function(){
    $("div.star").click(function(){
        $(this).addClass("star-chosen");
    });
});

.star {
     height: 2em;
     width: 2em;
     border: .1em solid black;
     border-radius: 1.1em;
     display: inline-block;
     margin: 0;
     padding: .1em;
}

.star-hover {
    background-color: blue;
}

.star-chosen {
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
</div>

Answer 1

当元素同时具有 star-hover 和 star-chosen 类时，真正的问题是应用哪个 background-color .

为什么不直接使用 css :hover:

.star {
   height: 2em;
   width: 2em;
   border: .1em solid black;
   border-radius: 1.1em;
   display: inline-block;
   margin: 0;
   padding: .1em;
  }

 .star:hover  {
   background-color: blue;
  }

  .star-chosen {
   background-color: red;
  }

你的代码:

$(function(){
  $("div.star").click(function(){
    $(this).addClass("star-chosen");
  });
});

http://jsfiddle.net/yyqwkaqp/

如果您正在寻找 jQuery 方法，则必须将 !important 添加到 star-hover:

.star-hover {
   background-color: blue !important;
 }

http://jsfiddle.net/d8wmhmrp/

但我更喜欢:hover 解决方案