CODEWITHSUNDEEP
javascriptjquerycsshoveraddclass
Bradley Mitchell
Bradley Mitchell

Reputation: 287

Why is this hover addClass not working?

Here is the jQuery:

$(document).ready(function() {
    $('#box').click(function() {
        $(this).addClass('fullColor');
    });
});

Here is the CSS:

#box {
    width:200px;
    height:200px;
    background-color:blue;
    opacity:0.5;
}

.fullColor {
    opacity:1.0;
}

JSFiddle: http://jsfiddle.net/VPW6c/

Upvotes: 0

Views: 133

Answers (3)

Halcyon
Halcyon

Reputation: 57709

The addClass works, it's just that the browser decides that the opacity in fullColor is overwritten by that in #box.

If you change the declaration to:

#box.fullColor {
    opacity:1.0;
}

it will apply the new opacity.

In CCS the more specific rule wins. #box is more specific than .fullColor since ids are more specific than classes. And #box.fullColor has both the class and the id so it's more specific than #box and .fullColor.

Upvotes: 5

user2246674
user2246674

Reputation: 7719

The class is correctly added. (This can/should have been verified using an appropriate developer tool.. which would also have shown which rules were applied, and why.)

However, the #box rule will always win over .fullColor due to CSS specificity:

Specificity is a type of weighting that has a bearing on how your cascading style sheet (CSS) rules are displayed .. If two selectors apply to the same element, the one with higher specificity wins.

Use #box.fullColor as a selector and observe the result - it is "more specific" than just #box, although it is only applied when the .fullColor class is present, and will thus win.

If this is not possible (it does sometimes happen), then !important can be used, but such use should be done sparingly.

Upvotes: 2

Maxito
Maxito

Reputation: 629

A less elegant solution, if you need to keep those CSS values, is adding !important to the fullColor opacity:

.fullColor{
    opacity:1.0 !important;
 }

Upvotes: 1

Related Questions