Question

我有以下html：

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

和以下css通常这个img是隐藏的，除非你将鼠标悬停在外卡上

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

.card .cardDropdown 
{
    visibility: hidden;
}

在某种情况下，在ajax通话期间我想显示此图像，即使我没有在卡片上空盘旋。我怎样才能覆盖这个

 visibility: hidden;

在这个特定的jquery代码集中进行设置，并在我的ajax调用结束后恢复正常？

Answer 1

向您的CSS添加一个新规则，该规则将覆盖其他规则，因为它具有适当的特异性：

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

然后，当您希望visiblity持久化时，将.cardShow类添加到您的卡片对象中，然后在您希望它返回动态行为时删除该类：

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

和

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

Answer 2

您可以设置cardImage.style.visibility = 'visible';（假设cardImage是对相关DOM元素的引用）。这将覆盖样式表中的CSS集。

然后设置cardImage.style.visibility = '';让样式表再次保留。

Answer 3

在需要时，不要过度复杂，添加或删除cardDropdown类：

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

...如果没有为cardDropdown类定义其他样式，否则只使用不同的类名。

我怎样才能用jquery覆盖这个css行为？

3 个答案: