Javascript 通过单击并重新单击div标记来创建两个事件

我想通过单击某个元素将颜色从黑色更改为橙色，并在再次单击该元素时将颜色从橙色更改为黑色

我还做了一个元素：CSS中的悬停选择器，这样图标在悬停时会变成橙色

在我的代码中，元素悬停时变为橙色，单击时变为橙色。当我再次点击它时，它也会变回黑色。但是一旦我点击它，悬停选择器就不再工作了。所以当我点击它两次时，它通过悬停保持黑色

我的HTML代码

我的javascript代码

$（文档）.ready（函数（）{
var jogging_selected=false；
$（“.pictures\u activitys:n第n个子项（1）”。单击（函数（）{
如果（已选择点动）{
$（“.pictures\u activitys:nth child（1）”）.css（“背景”、“url（img/sports/jogging\u black.png）”）；
}
否则{
$（“.pictures\u activitys:nth child（1）”）.css（“背景”、“url（img/sports/jogging\u orange.png）”）；
}
点动_选定=！点动_选定；
});
});

我的CSS代码：

.pictures\u活动{
利润率：30像素；
边缘顶部：80px；
宽度：128px；
高度：128px；
}
.pictures\u活动：第n个孩子（1）{
背景：url（../img/sports/jogging_black.png）；
}
.pictures\u活动：第n个孩子（1）：悬停{
背景：url（../img/sports/jogging_orange.png）；
光标：指针；
}

---

有人可以告诉我，当我在元素上单击两次时，为什么元素会停止变为橙色？添加

！重要信息

到您的

背景

悬停

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

因为您的脚本为元素创建了内联样式，所以此内联样式将覆盖您的css所以

！重要信息

将强制元素获取背景表单css并覆盖内联样式

---

添加

！重要信息

到您的

背景

悬停

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

因为您的脚本为元素创建了内联样式，所以此内联样式将覆盖您的css所以

！重要信息

将强制元素获取背景表单css并覆盖内联样式

---

就这样！谢谢！就这样！谢谢！