Question

我正在尝试切换有关动态引导卡悬停的描述。我试图触发.card-description类，以显示何时将鼠标悬停在当前悬停的项目上。

此刻，它会切换所有卡的全部描述。

$(document).on("mouseenter", ".frontpage-fluid .card", function() {
    $(".frontpage-fluid .card .card-description").show();
});

$(document).on("mouseleave", ".frontpage-fluid .card", function() {
    $(".frontpage-fluid .card .card-description").hide();
});

如何做到这一点，使其仅切换当前悬停项目的描述？

PS：使用jQuery .hover不能用于动态内容

Answer 1

您正在执行全局查找，而不是根据上下文查找所需的元素。

$(".card-description", this).show();
//or
$(this).find(".card-description").show();

这只会在事件发生的元素内找到卡片说明。

作为对此的补充说明，我应该提到，您可以使用一些CSS规则来做到这一点，并且完全放弃JavaScript。

.frontpage-fluid .card .card-description { display: none; }
.frontpage-fluid .card:hover .card-description { display: inherit; }

jQuery-悬停显示说明-动态内容

1 个答案: