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

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