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

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.

score 2 · Answer 1 · answered Jul 17 '11 at 05:15

2

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

answered Jul 17 '11 at 05:15

simshaun

21,263
1
57
73

For future readers, the owner of `this` is `div.test`, but it finds `div.innerDiv` – Strawberry Jul 17 '11 at 09:16

score 1 · Accepted Answer · answered Jul 17 '11 at 05:16

1

Here you go.

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

answered Jul 17 '11 at 05:16

Lime

13,400
11
56
88

score 1 · Answer 3 · answered Jul 17 '11 at 05:18

1

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

answered Jul 17 '11 at 05:18

vinceh

3,490
1
21
24

Haha, I actually have that in my source, I don't know how did it end up like that in the question. – Strawberry Jul 17 '11 at 05:23
For future readers, the owner of `this` is `.test`, and this was not what I was trying to do. – Strawberry Jul 17 '11 at 09:17

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

3 Answers3

Linked