How can I fade only 1 div on mouseover when the classes applies to 5 other divs?

$("div.test").mouseenter(function() {
                                    $("div.innerDiv").fadeIn("slow");
            }).mouseleave(function() {               
                                    $("div.innerDiv").fadeOut("slow");
            });   

<div class="test">
<div class="innerDiv">1</div>
</div>

<div class="test">
<div class="innerDiv">2</div>
</div>

<div class="test">
<div class="innerDiv">3</div>
</div>

<div class="test">
<div clas开发者_如何学Cs="innerDiv">4</div>
</div>

So how this currently behaves right now is that if I mouseover any of the divs then all of them would fade in. I want only the div that I hover over to fade in and not all of them. I think there is a way to change the jQuery without changing the structure of my div, but I don't know how.

$("div.test")
    .mouseenter(function() {
        $(this).find("div.innerDiv").fadeIn("slow");
    }).mouseleave(function() {               
        $(this).find("div.innerDiv").fadeOut("slow");
    });   

Here you go.

$("div.test").mouseenter(function() {
                $('div.innerDiv',this).fadeIn("slow");
            }).mouseleave(function() {               
                $('div.innerDiv',this).fadeOut("slow");
            }); 

Use this instead of a string as your selector

Check this

$(".test").mouseenter(function() {
    $(this).fadeOut("slow");
}).mouseleave(function() {               
    $(this).fadeIn("slow");
});   

By the way, I think you want to fadeOut first, not fadeIn