Two events by clicking and reclicking on a div tag
<p>I want to change the color from black to orange by clicking on an element and change the color from orange to black when I click on the element again.</p>

<p>I did also an element:hover selector in CSS so the icon turns to orange when hovered.</p>

<p>With my code, the element turns to orange when hovered and change to orange when clicked on it. It also changes back to black when I click on it again. But once I clicked on it, the hover selector doesnt work anymore. So when I clicked twice on it, it stays black by hovering.</p>

<p>My HTML code</p>

<pre class="lang-html prettyprint-override"><code> &lt;div id="activitys"&gt;
   &lt;div class="pictures_activitys"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>My javascript code</p>

<pre class="lang-js prettyprint-override"><code>$( 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;

    });
});
</code></pre>

<p>My CSS code:</p>

<pre class="lang-css prettyprint-override"><code>.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;
}
</code></pre>

<p>Someone can tell me why the element stops turning orange by hovering when i clicked twice on it?</p>