CODEWITHSUNDEEP
javascriptjqueryhtmlcsshover
NeoSyp
NeoSyp

Reputation: 97

Hover disabled after style change: important doesn't work

My problem is as follows: I have a clickable div with a background-image that changes (the image) on :hover.

This div kind of represents a menu button. When the div is pressed a script is executed that changes the background-image too.

However, I want the hover to still work after running this script. I have read about the style priorities and that I should use !important with the hover. I have used this before without problems, but for some reason the hover doesn't work, even with !important. Does this have something to do with background-image, can't this be combined with !important?

The div:

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

The 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
}

And the script:

<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>

Upvotes: 0

Views: 330

Answers (1)

Steyn
Steyn

Reputation: 1321

The correct way to write an important would be

!important;

not

; !important

Notice the placement of the semicolon.

Upvotes: 1

Related Questions