Question

我的问题如下：我有background-image的可点击的div，它会更改:hover上的图片。

这种div代表一个菜单按钮。按下div时，将执行一个脚本，该脚本也会更改background-image。

但是，我希望在运行此脚本后悬停仍然有效。我已经阅读了关于样式优先级的内容，并且我应该在悬停时使用!important。我之前使用过这个没有问题，但由于某些原因，即使使用!important，悬停也不起作用。这是否与background-image有关，是否可以与!important合并？

div：

<a href="#" onclick="open_Thema(1);">
    <div id="venster_Links_Menu_1">
        <div class="venster_Links_Menu_Tekst">Introductie</div>
    </div>
</a>

css：

#venster_Links_Menu_1 {
    margin: 0;
    height: calc((100%/6) - 1px);
    border-bottom: 1px solid white;
    width: 100%;
    background-image: url(images/Thema_1_Half.png);
    background-size: cover;
    position:relative;
}

#venster_Links_Menu_1:hover {
    background-image: url(images/Thema_1.png); !important
}

脚本：

<script>

    var themaOud = 0;

    function init(){
    }

    function open_Thema(themaNieuw){
        if (themaOud != 0)
        {
            document.getElementById("venster_Links_Menu_"+themaOud).style.backgroundImage="url(images/Thema_"+themaOud+"_Half.png)";
        }
        document.getElementById("venster_Links_Menu_"+themaNieuw).style.backgroundImage="url(images/Thema_"+themaNieuw+".png)";
        themaOud = themaNieuw;
    }

</script>

Answer 1

写一个重要的正确方法是

!important;

不是

; !important

注意分号的放置。

风格改变后禁用悬停：重要的是不起作用

1 个答案: