Gerry Studios Gerry Studios - 1 month ago 9
CSS Question

addClass in jquery doesn't work as I want

I have a code that adds a class (

.class2
) using jQuery. The class is applied, but some styles of the class don't work :

$('.item1').addClass('class2');


.item1 {
font-size: 40px;
text-align: center;
height: 60px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 0px 0px;
text-decoration: none;
color: white;
margin: -10px 0px;
-webkit-transition: background-color 0.4s;
-moz-transition: background-color 0.4s;
transition: background-color 0.4s;
}
.item1:hover {
background-color: rgba(0, 0, 0, 0.7);
}
.class2 {
background-color: rgba(0, 0, 0, .85);
border: 1px solid black;
cursor: default;
/* background-color and border aren't applied */
}

Answer

If you load jquery library, and still doesn's work. You can add !important to style so can ovveride the style, here is example of code at class2.

.class2 {
    background-color: rgba(0, 0, 0, .85) !important;
    border: 1px solid black !important;
    cursor: default !important;
    /* background-color and border aren't applied */
}

javascript jquery