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代码被徘徊时（显然）执行该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);
}

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

3 个答案: