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);
    // ...

Answer 2

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

Answer 3

我认为这个超出了你的职能范围。所以，你可以设置var that = this;在setTimeout之前。并使用它而不是这个。

回调内容

$（this）子元素css改变根本不起作用

3 个答案: