Question

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

这是我在做什么...我正在制作wooccomerce页面，在其中我将entry_title类设置为([x][y])(?=[^y])，以便长标题可以在一行上，但是我想这样做这样，当用户悬停带有长标题的产品时，就会显示完整标题（即，将一个类添加到元素并设置nowrap）

下面是我用来使标题变成椭圆形的CSS

white-space: normal

然后jQuery如下

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

现在的问题是，如果我悬停任何产品，则会显示长产品的标题（我没有悬停在其中）。只希望它适用于当前悬停的元素。但我只有jQuery(document).ready(function($) { $('.wf-cell').hover(function() { $('.entry-title').addClass('show_ftitle'); }, function() { $('.entry-title').removeClass('show_ftitle'); }); });可以使用。有没有办法我可以指出这一点，并使它仅适用于将光标悬停在其上的产品。

谢谢

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

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

2 个答案: