Clever Geek Handbook

How to use $ (this) in jQuery hover event handler?

I have hidden the unordered list in a div. The div has a class '.feed-label' and I am currently showing the ul when the div hovers.

My problem is that when hovering, all other items are also displayed and I only need the one that was visible to show.

I don't know how to use $ (this).

$('.feed-label').hover(function() {
    $('.article-interactive-buttons').toggleClass('hide');
});
+3


source to share


3 answers


this

the keyword in the context of an event handler refers to the hovering element, that is, the element .feed-label

. You have to create a jQuery object by passing the element to the jQuery constructor and then use find

/ children

to select the target descendant.

$('.feed-label').hover(function() {
    $(this).find('.article-interactive-buttons').toggleClass('hide');
});


You can also use a syntax $(selector, context)

that will work like the above snippet:

$('.feed-label').hover(function() {
    $('.article-interactive-buttons', this).toggleClass('hide');
});
+7


source


If the ul is inside a div and you only want to go for a css solution, you can do this:



.feed-label:hover .article-interactive-buttons {
     display: none;
}

.feed-label:hover .article-interactive-buttons {
     display: block;
}
0


source


You may try:

$('.feed-label').hover(function() {
    $(this).closest('.article-interactive     buttons').toggleClass('hide');
}
-2


source






More articles:


All Articles