$(this) child element css change not working at all

Question

I have a little 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>

Everything works fine, except one small thing. z-index isn't changing. Can you guys help me out with this? I've also tried with "next", "child", "find" - none worked :(

.item is relative, .item-overlay is absolute... T.J Crowder's solution works like a charm. Thank you! — Rafff, Jul 31 '13 at 07:36

score 5 · Accepted Answer · answered Jul 31 '13 at 07:32

this within the function you're passing setTimeout will be window, not the element. (this depends on how a function is called, not where it's used.)

You can save the this value the event handler got (or actually, as you're going to jQuery-wrap it, just do that with a var outside the setTimeout function), e.g.:

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

score 0 · Answer 2 · answered Jul 31 '13 at 07:34

0

You need absolute positioning for ".item-overlay"

answered Jul 31 '13 at 07:34

Lord Midi

754
1
9
25

score 0 · Answer 3 · answered Jul 31 '13 at 07:36

0

I think this is out of your function. So, you can set var that = this; before setTimeout. And use that instead of this.

Callback stuff

answered Jul 31 '13 at 07:36

MarshalSHI

615
1
8
17

$(this) child element css change not working at all

3 Answers3

Linked