Question

The html is like this:

<div class="a_list">
  <div class="hide_list_scrollbar"></div>
</div>
<div class="a_list">
  <div class="hide_list_scrollbar"></div>
</div>

The js is like this:

$(".a_list").mouseenter(
    function(){
        $(".hide_list_scrollbar").hide();
    }
);
$(".a_list").mouseleave(
    function(){
        $(".hide_list_scrollbar").show();
    }
);

Right now, the mouse event is performed on all the “a_list” divs. I only want to perform the mouse event on the particular div that actually activated the mouse event, not all of the “a_list” divs. How do I achieve this? Thanks!

Answer 1

Add a context to the selector. See below,

$(".hide_list_scrollbar", this).hide();

Full Code:

$(".a_list").mouseenter(function(){
    $(".hide_list_scrollbar", this).hide();
}).mouseleave(function(){
    $(".hide_list_scrollbar", this).show();
});

Or you can use .find like below,

$(".a_list").mouseenter(function(){
    $(this).find(".hide_list_scrollbar").hide();
}).mouseleave(function(){
    $(this).find(".hide_list_scrollbar").show();
});

Note: I have chained your call to reduce the query to DOM.