How to target an element using "this" keyword?

Question

<div class="col-xs-12 col-sm-4">
        <div class="thumbnail-container">
            <img class="img-responsive" src="http://placehold.it/1024x768" alt="...">
            <div class="thumbnail-overlay"></div>
            <p class="text-center text-nowrap" style="display:block">title</p>
        </div>
    </div>

function overlay () {
    $('.thumbnail-container > .text-center').mouseenter(function () {
        $('.thumbnail-container > .thumbnail-overlay').fadeOut(500)
    })
    $('.thumbnail-container > .text-center').mouseleave(function () {
        $('.thumbnail-container > .thumbnail-overlay').fadeIn(500)
    })
}

I have 6 of those "thumbnail-container" and I'd like to execute that jquery code only when a single of them is hovered (obviously). Right now when i hover a "p.text-center" the code fades out ALL the divs in ALL the 6 containers. I've tried putting the "this" keyword anywhere but it still not working.

Are you sure you're using the right `this`? http://stackoverflow.com/questions/1051782/jquery-this-vs-this — damian, Dec 18 '14 at 19:20
Within the `mouseenter` callback, `this` represents the `.text-center` element that was hovered. You'll need to select the parent `.thumbnail-container` from that context. — zzzzBov, Dec 18 '14 at 19:26

score 2 · Answer 1 · answered Dec 18 '14 at 19:23

function overlay () {
    $('.thumbnail-container > .text-center').mouseenter(function () {
        $(this).parent().find('.thumbnail-overlay').fadeOut(500)
    });
    $('.thumbnail-container > .text-center').mouseleave(function () {
        $(this).parent().find('.thumbnail-overlay').fadeIn(500)
    });
}

score 0 · Accepted Answer · answered Dec 18 '14 at 19:25

0

Your event handler is on a .text-center, but the element you want to fade out is its sibling with .thumbnail-overlay, so you could do this:

$(this).siblings('.thumbnail-overlay').fadeOut(500)

answered Dec 18 '14 at 19:25

Brian Stephens

5,161
19
25

yep. that's it. thanks. also jbarnett solution works but yours is less typing – kernel32bts Dec 18 '14 at 19:35

score 0 · Answer 3 · answered Dec 18 '14 at 19:29

0

<p class="text-center text-nowrap" style="display:block" mouseenter="fade_out(this)" mouseleave="fade_in(this)">title</p>

and

function fade_in(element){
    $(element).fadeIn(500);
}

function fade_out(element){
    $(element).fadeOut(500);
}

answered Dec 18 '14 at 19:29

Ruben Kazumov

3,803
2
26
39

How to target an element using "this" keyword?

3 Answers3