Setting display: block !Important

Question

There is a problem with a rollover doesn't want to show its content and if I do

#callCenter {
    position: fixed;
    z-index: 2411 !important;
    display: block !important; /* please note here !important */
    right: 110px;
}

It's shown, but if I do: (so the div is hidden until another element is clicked)

#callCenter {
    position: fixed;
    z-index: 2411 !important;
    right: 110px;
}

And

$('#telefonosCabecera').click(function(){
    $("#callCenter").css('display','block!important'); // or 'block !important'
    alert('done')
});

I don't see #callCenter but I do see the alert.

What could be the reason for this?

Answer 1

You need to do one of the following:

1. Add a class with the !important rule (i.e.: .myClass{display:block !important;} ) and then add the class to the element
2. Add the css attribute via $('#myElement').attr('style','display: block !important');