Question

$("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 class="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.

Answer 1

Here you go.

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