後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; 
    } 

您的JS：

$(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解決方案

Answer 2

寫在CSS .star懸停.star，選擇它幫助你

爲什麼你如果懸停添加下課？它可以使使用CSS 看到這樣的解決方案：

$("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-chosen { 
 
    background-color: red; 
 
} 
 
.star:hover { 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>