CODEWITHSUNDEEP
jquerycss
leora
leora

Reputation: 196741

How can i override this css behavior with jquery?

I have the following html:

 <div class="card">
 <span class="cardDropdown">
    <img class="cardDownArrow" src="/Icons/arrow_down_white.png"/> 
 </span>
</div>

and the following css so normally this img is hidden unless you over hovering the outer card

.card:hover .cardDropdown 
{
    visibility: visible;
}

.card .cardDropdown 
{
    visibility: hidden;
}

There is a certain situation where during an ajax call i want to show this image even if i am not hovering over the card. How can i override this 

 visibility: hidden;

setting just during this specific set of jquery code and have it go back to normal after my ajax call ends?

Upvotes: 1

Views: 86

Answers (3)

jfriend00
jfriend00

Reputation: 707876

Add an new rule to your CSS that will override the others because it comes after and has appropriate specificity:

/* default value is hidden */
.card .cardDropdown 
{
    visibility: hidden;
}

/* show on hover */
.card:hover .cardDropdown 
{
    visibility: visible;
}

/* always show the card if .cardShow class is present */
.card.cardShow .cardDropDown {
    visibility: visible;
}

And, then add that .cardShow class to your card object when you want the visiblity to persist, then remove that class when you want it to go back to the dynamic behavior:

// make visiblity persist regardless of hover state
$(theCard).addClass("cardShow");

and

// restore dynamic behavior based on hover
$(theCard).removeClass("cardShow");

Upvotes: 3

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324760

You can set cardImage.style.visibility = 'visible'; (assuming cardImage is a reference to the DOM element in question). This will override CSS set in the stylesheet.

Then set cardImage.style.visibility = ''; to let the stylesheet take hold again.

Upvotes: 1

VisioN
VisioN

Reputation: 145458

Just not to overcomplicate, add or remove cardDropdown class when required:

$('.card > span').addClass('cardDropdown');     // show
$('.card > span').removeClass('cardDropdown');  // hide

... if you have no other styles defined for cardDropdown class, otherwise just use different class name.

Upvotes: 0

Related Questions