Question

I have been using delegate to get the hover effect working on a nested div. But it seems to cause a flickering loop and I have no idea how to stop it.

The .shadow div is the height and width of it’s parent div, .box.

   <div class="wrapper">
       <div class="box">
          <div class="hover"><h2>Joe Bloggs</h2></div>
          <div class="cover"></div>
          <div class="shadow"></div>
          <img class="image" src="_assets/images/joebloggs.jpg" alt="" />
       </div>
    </div>

    $(".wrapper").delegate(".shadow", "mouseover mouseout", function(e) {
       if (e.type == 'mouseover') {
          $(this).parent().find('.cover').show();
          $(this).parent().find('.hover').show();
       } else {
          $(this).parent().find('.cover').hide();
          $(this).parent().find('.hover').hide();
       }
    });

Answer 1

Your events are being triggered in an infinite loop while hovering over the target element.

1. Mouse enters .shadow
2. .cover and .hover are displayed
3. Mouse leaves .shadow due to .hover being displayed
4. .cover and .hover are hidden
5. (GoTo 1. unless mouse is no longer over any of the three)

If you instead used mouseenter/mouseleave and made cover and hover children of shadow, you won’t have this problem.