Question

Here is my css:

.parentDiv {
}

.childDiv {
    height:40px;
    width:165px;
    color:#D6D6D6;
    text-align:left;
    cursor:pointer;
    font-size:.85em;
    font-weight:normal;
    border-top:1px solid #0F0F0F;
}

.childDiv:hover{
    background:#2B2B2B;
}

Here is my jquery:

<script type="text/javascript">

    $('.childDiv').click(function(){
        $(this)
            .css('background-color','#4F94CD')
            .siblings()
            .css('background-color','black');
    });

</script>

The div hover effect of the class childDiv work perfectly. However, once I run the above jquery function, the CSS hover effect no longer seems to work. It is essential that I am still able to use the hover effect after running this jquery function, I tried to look for a jquery substitute for the hover effect, but none worked perfectly. If anyone knows how to solve this, help would be greatly appreciated, thanks!

Answer 1

That sounds not weird…Try to set !important on the hover background, like this:

.childDiv:hover {
  background: #2b2b2b !important;
}