$(this)子元素css改变根本不起作用

Question

我有一个小问题.

 $('.item').mouseenter(function() {
    setTimeout(function() {
  $(this).find('.item-overlay').css('z-index', '-1');
}, 300);
}).mouseleave(function() {
  $(this).find('.item-overlay').css('z-index', '');
});

 <div class="item">
    <div class="item-overlay">
    </div>

    <iframe>...</iframe>

 </div>

一切都很好,除了一件小事.z-index没有变化.你能帮助我吗？我也试过"下一步","孩子","找到" - 没有工作:(

Answer 1

this在你传递的函数setTimeout中window,不是元素.(this取决于函数的调用方式,而不是函数的使用方式.)

您可以保存this事件处理程序获得的值(或实际上,当您要使用jQuery包装它时,只需var在setTimeout函数外部执行此操作),例如:

$('.item').mouseenter(function() {
    var $this = $(this);
    setTimeout(function() {
        $this.find('.item-overlay').css('z-index', '-1');
    }, 300);
    // ...