overriding class with !important tag

I am trying to override an !important 开发者_如何学Ctag for a hover class in a plugin I am using.

The css for the element/class in the plugin is as follows:

input.fl-submit {
    background: #555;
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.12, rgb(60,60,60)),
        color-stop(1, rgb(85,85,85))
    );
    background: -moz-linear-gradient(
        center bottom,
        rgb(60,60,60) 12%,
        rgb(85,85,85) 100%
    );
}

input.fl-submit:hover {
    background: #282828 !important;
}

I am trying to change the background property, which I can do with an !important tag for input.fl-submit, but because the hover property already has an !important tag I can't work out how to override this. I have tried a couple of jquery methods that I found on stackoverflow already, but haven't been able to get it working, so would be grateful for any help.

Thanks,

Nick

You can always use Javascript:

        document.styleSheets[1].deleteRule(0);
    var background = '#000000';
    document.styleSheets[1].insertRule('input.fl-submit:hover { background: ' + background + '; }', 0);
    //Another Way of doing...
    document.styleSheets[1].cssRules[0].style.background = background;

More Info

The entire idea of the !important tag is so that you COULDN'T override it. I am assuming you don't have access to the CSS and can't just remove it, therefore, the only solution I have is to give it another background style with another !important modifier (this will override the previous one).