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

Question

I'm trying to figure out how to target an element when hovered but the thing is it shares same class with other element on the page.

Here is what i'm doing... i'm working on a wooccomerce page in which i setting the entry_title class to nowrap , so that long titles can be on one line but i want to do it such a way that when user hover the product with long title, the full title appears (ie add a class to the element and set white-space: normal )

Below is the CSS i'm using to make the title one line with ellipses

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

Then the jQuery is as follow

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

Now the issue is that if i hover any of the product... the title of long product (in which i didn't hover) will show. only want it to work for the current hovered element. but i only have class to work with. Is there a way i can pin-point this and make it work only for the product that my cursor is hovered on.

Thanks

Answer 1

You can simply add this with a comma after the class. Example using your code below:

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

});

Hope it helps.

Answer 2

There is no need for JavaScript, just do it with css hover

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

Problem with your code is you are selecting all the elements, not the one you are using

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