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.

reyaner · Accepted Answer · 2013-10-21 14:10:39Z

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{
    ...
}

edited Oct 21, 2013 at 14:10

answered Oct 21, 2013 at 14:03

reyaner

2,8091 gold badge14 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sojobo · Accepted Answer · 2013-10-21 14:03:29Z

1

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.

answered Oct 21, 2013 at 14:03

Sojobo

111 bronze badge

1 Comment

Patsy Issa Over a year ago

The issue here is that jquery sets the styles applied via .css() inline, and they override the styles found in the style sheet.

Patsy Issa · Accepted Answer · 2013-10-21 14:11:18Z

1

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').

edited Oct 21, 2013 at 14:11

answered Oct 21, 2013 at 14:00

Patsy Issa

11.3k5 gold badges57 silver badges76 bronze badges

2 Comments

Run Over a year ago

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

Patsy Issa Over a year ago

@lauthiamkok easy fix, add a class to it and apply the hover, check my edit in 2 min.

palaѕн · Accepted Answer · 2013-10-21 14:01:08Z

0

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

answered Oct 21, 2013 at 14:01

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

1 Comment

Run Over a year ago

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

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

1 Comment

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related