How can i override this css behavior with jquery?

Question

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?

Answer 1

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");

Answer 2

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.

Answer 3

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.