Is there a way to toggle the color of an element from black to orange with a single click and back again with another click? Additionally, I have set up a hover effect in CSS that changes the color to orange when hovered over.
In my current code, the element successfully transitions to orange when hovered over and changes color on click. However, after clicking twice, the hover effect stops working and the element remains black even when hovered over.
This is my HTML setup:
<div id="activitys">
<div class="pictures_activitys"></div>
</div>
Here is my JavaScript implementation:
$( 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;
});
});
And this is how I've styled it in 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;
}
Does anyone know why the hover effect stops working after double-clicking on the element?