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

Posted 2023-02-25

【中文标题】$(this) 子元素 css 更改根本不起作用

【英文标题】：$(this) child element css change not working at all

【发布时间】：2013-07-31 07:29:41

【问题描述】：

我有一个小问题。

 $('.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 没有改变。你们能帮我解决这个问题吗？ 我也试过用“next”、“child”、“find”——没有一个成功:(

【问题讨论】：

你的元素是绝对定位的吗？

.item 是相对的，.item-overlay 是绝对的...... T.J Crowder 的解决方案就像一个魅力。谢谢！

【参考方案1】：

this 在您传递的函数中setTimeout 将是window，而不是元素。 （this 取决于函数的调用方式，而不是使用位置。）

您可以保存事件处理程序获得的 this 值（或者实际上，当您要使用 jQuery 包装它时，只需在 setTimeout 函数之外使用 var 即可），例如：

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

【参考方案2】：

“.item-overlay”需要绝对定位

【参考方案3】：

我认为 this 超出了您的功能。所以，你可以设置 var that = this;在设置超时之前。并用它代替这个。

回调东西