如何仅将jQuery中当前悬停的元素作为目标

Question

我试图弄清楚如何在悬停时定位一个元素，但问题是它与页面上的其他元素共享同一类。

这是我正在做的...我正在处理wooccomerce页面，在该页面中，我将entry_title类设置为nowrap ，以便长标题可以在一行上，但是我想要这样一种方式：当用户悬停时带有长标题的产品，将显示完整标题（即，将一个类添加到元素并设置white-space: normal ）

以下是我用来使标题用省略号一行的CSS

.woocommerce .product h4.entry-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: .3s;
}
.show_ftitle {
    white-space: normal !important;
}

然后jQuery如下

jQuery(document).ready(function($) {
    $('.wf-cell').hover(function() {
        $('.entry-title').addClass('show_ftitle');
    }, function() {
        $('.entry-title').removeClass('show_ftitle');
    });
});

现在的问题是，如果我悬停任何产品，则会显示长产品的标题（我没有悬停在其中）。 只希望它适用于当前悬停的元素。 但我只有class可以合作。 有没有办法我可以指出这一点，并使它仅适用于将光标悬停在其上的产品。

谢谢

Answer 1

您可以简单地添加this与课后一个逗号。 使用以下代码的示例：

jQuery(document).ready(function($) {
$('.wf-cell').hover(function() {
    $('.entry-title', this).addClass('show_ftitle');
}, function() {
    $('.entry-title', this).removeClass('show_ftitle');
});

}）;

希望能帮助到你。

Answer 2

无需JavaScript，只需将CSS悬停即可

.wf-cell:hover .entry-title {
  white-space: normal !important;
}

代码的问题是您正在选择所有元素，而不是正在使用的元素

$('.wf-cell').hover(function() {
  $(this).find('.entry-title').addClass('show_ftitle');
}, function() {
  $(this).find('.entry-title').addClass('show_ftitle');
});