Jquery .slideUp on Multiple divs with the same class

Question

Hi I am pretty new to jquery and the way to use it properly to apply a function to div, but it shares it's class with multiple div's. What I want is to apply .slideUp() on mouse enter to one at div at a time. My problem is that they all have the same class and when my mouse enters any of the divs they all slide up. Below is my html with jquery using .hide toggle. I know I need to use some kind of variable or selector to tell jquery what to do but I can't think how to do it. Any help will be much appreciated.

This is the Jquery

$(document).ready(function(){


        $(".item1, .item2, .item3").mouseenter(function(){
          $(".black_overlay").toggle();
        });

This is the html

<div id="container">
            <div class="item1">
                <div class="black_overlay"><h1 id="mini">New Art Exchange<br/>
                Culture Cloud Campaign</h1></div>               
            </div>
            <div class="item3">
                <div class="black_overlay"><h1 id="mini">New Art Exchange<br/>
                Culture Cloud Campaign</h1></div>
            </div>
            <div class="item2">
                <div class="black_overlay"><h1 id="mini">New Art Exchange<br/>
                Culture Cloud Campaign</h1></div>   
            </div>
            <div class="item3">
                <div class="black_overlay"><h1 id="mini">New Art Exchange<br/>
                Culture Cloud Campaign</h1></div>
            </div>
            <div class="item2">
                <div class="black_overlay"><h1 id="mini">New Art Exchange<br/>
                Culture Cloud Campaign</h1></div>
            </div>          
</div>

All these divs will eventually be posts in wordpress using masonry to organise them on screen.

Answer 1

Use .find() to select the excepted one:

$(".item1, .item2, .item3").mouseenter(function(){
      $(this).find(".black_overlay").toggle();
    });