javascript - 如何在 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');
});

});

希望有帮助。