如何使用“this”关键字定位元素？

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)
    })
}

我有其中的 6 个 "thumbnail-container"，我想仅在其中一个悬停时执行该 jquery 代码（显然）。现在，当我将鼠标悬停在"p.text-center" 上时，代码会淡出所有6 容器中的所有div。我尝试将"this" 关键字放在任何地方，但它仍然无法正常工作。

Answer 1

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)
    });
}

Answer 2

您的事件处理程序位于.text-center 上，但您要淡出的元素是它与.thumbnail-overlay 的同级元素，因此您可以这样做：

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

Answer 3

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

和

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

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