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/

通过单击并重新单击div标记来执行两个事件

1 个答案: