jquery:how to add css hover in with jquery css?

Question

I have set the hover opacity in my css,

.button-simple:hover {
    opacity:.70;
    filter:alpha(opacity=70);
    filter: "alpha(opacity=70)";
}

But the hover opacity does not show after I have this line in my code,

$('input[type=submit]').attr('disabled', false).css({opacity:1,cursor:"pointer"});

Any idea what I can do to add the hover css in?

EDIT:

The reason I cannot use !important in my css is that I have this line to disable the submit button first,

$('input[type=submit]',parent).attr('disabled', true).css({opacity:0.4,cursor:"default"});

If I set !important in my css, this disabled button will the hover effect as well which I don't want.

Answer 1

if you can avoid setting opacity with jquery, you should do this:

$('input[type=submit]',parent).attr('disabled', true).addClass("disabled");
.button-simple.disabled{
    opacity:.4;
    filter:alpha(opacity=.4);
    filter: "alpha(opacity=.4)";
    cursor: default;
}

.button-simple{
    opacity:1;
    filter:alpha(opacity=1);
    filter: "alpha(opacity=1)";
    cursor: pointer;
}

.button-simple.disabled:hover{
    ...
}

Answer 2

The opacity property can take a value from 0.0 - 1.0. A lower value makes the element more transparent.

The value opacity:1 makes it opaque.

Answer 3

Add !important to override the inline style jquery adds.

.button-simple:hover {
    opacity:.70 !important;
    filter:alpha(opacity=70) !important;
    filter: "alpha(opacity=70)" !important;
}

Edit:

In light of the last edit an "elegant" solution would be:

.button-simple.active:hover {
    opacity:.70;
    filter:alpha(opacity=70);
    filter: "alpha(opacity=70)";
}

And in your script where you are removing the disabled attribute add .addClass('active').

Answer 4

Modify the button-simple hover css like this using the !important rules:

.button-simple:hover {
    opacity:.70 !important;
    filter:alpha(opacity=70) !important;
    filter: "alpha(opacity=70)" !important;
}