通過單擊並重新在div標記上點擊兩個事件

Question

我想通過單擊元素將顏色從黑色更改爲橙​​色，並在再次單擊該元素時將顏色從橙色更改爲黑色。

我也做了一個元素：在CSS中懸停選擇器，因此圖標在盤旋時變爲橙色。

使用我的代碼，元素在徘徊時變爲橙色，在單擊元素時變爲橙色。當我再次點擊它時，它也會變回黑色。但一旦我點擊它，懸停選擇器不再工作。所以當我點擊兩次時，它就會徘徊在黑色。

我的HTML代碼

<div id="activitys"> 
    <div class="pictures_activitys"></div> 
</div> 

我的JavaScript代碼

$(document).ready(function() { 
    var jogging_selected = false; 

    $(".pictures_activitys:nth-child(1)").click(function() { 

     if(jogging_selected){ 
      $(".pictures_activitys:nth-child(1)").css("background", "url(img/sports/jogging_black.png)"); 
     } 
     else{ 
      $(".pictures_activitys:nth-child(1)").css("background", "url(img/sports/jogging_orange.png)"); 

     } 
     jogging_selected = !jogging_selected; 

    }); 
}); 

我的CSS代碼：

.pictures_activitys{ 
    margin: 30px; 
    margin-top: 80px; 
    width: 128px; 
    height: 128px; 
} 
.pictures_activitys:nth-child(1){ 
    background:url(../img/sports/jogging_black.png); 
} 
.pictures_activitys:nth-child(1):hover{ 
    background:url(../img/sports/jogging_orange.png); 
    cursor: pointer; 
} 

有人能告訴我爲什麼元素停止通過當我點擊徘徊變成橙色兩次呢？

Answer 1

添加!important您background懸停

.pictures_activitys:nth-child(1):hover{ 
    background:url(../img/sports/jogging_orange.png) !important; 
    cursor: pointer; 
} 

，因爲你的腳本由內嵌樣式的元素，所以你的CSS這樣!important將迫使元素此內嵌樣式替代拿到後臺形式的CSS和覆蓋內聯樣式

https://jsfiddle.net/IA7medd/9r3L0ugc/