다음 HTML이 있습니다.
<div class="card">
<span class="cardDropdown">
<img class="cardDownArrow" src="/Icons/arrow_down_white.png"/>
</span>
</div>
그리고 다음 CSS는 일반적으로 외부 카드를 가리 키지 않는 한이 이미지가 숨겨집니다.
.card:hover .cardDropdown
{
visibility: visible;
}
.card .cardDropdown
{
visibility: hidden;
}
ajax 통화 중에 카드 위로 마우스를 가져 가지 않아도이 이미지를 표시하고 싶은 특정 상황이 있습니다. 이것을 어떻게 무시할 수 있습니까?
visibility: hidden;
이 특정 jquery 코드 세트 동안 설정하고 내 ajax 호출이 끝난 후 정상으로 돌아 갑니까?
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;
}
그런 다음 .cardShow가시성을 유지하려는 경우 해당 클래스를 카드 개체에 추가 한 다음 동적 동작으로 돌아가려면 해당 클래스를 제거합니다.
// make visiblity persist regardless of hover state
$(theCard).addClass("cardShow");
과
// restore dynamic behavior based on hover
$(theCard).removeClass("cardShow");
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다