-1

With reference to this question

When mouseenter on each item, its overlay disappearing, when mouseleave - the overlay shows.

When I have more items, and fast hovering on them randomly, they're not returning to it's previous state. It's quite annoying :/

Why is that?

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

http://jsfiddle.net/w3Gha/

Community
  • 1
  • 1
Rafff
  • 1,510
  • 3
  • 19
  • 38
  • Create a fiddle or send us your code because it's difficult to help you with so little information. – Lucas Willems Jul 31 '13 at 08:14
  • seems like a timer could solve your problem. e.g. when enter a item start a tiemout from about 500 msecs and after its completed execute the hover function. fast hovers will be excluded this way. – mercsen Jul 31 '13 at 08:16
  • its hard without code, the problem could also be that the leave handler wont trigger right – mercsen Jul 31 '13 at 08:18
  • Link to jsfiddle updated – Rafff Jul 31 '13 at 08:31

2 Answers2

1

Try with hover(): http://jsfiddle.net/KfS9H/

  $(".item").hover(
      function () {
           $(this).find('.item-overlay').stop().css('z-index', '-1');
      },
      function () {
           $(this).find('.item-overlay').stop().css('z-index', '1');
      }
  );
ToX 82
  • 1,064
  • 12
  • 35
0

Try this out:- http://jsfiddle.net/adiioo7/w3Gha/1/

Use $('.item iframe') instead of $('.item').

JS:-

$('.item iframe').mouseenter(function () {
    var $this = $(this);
    setTimeout(function () {
        $this.find('.item-overlay').css('z-index', '-1');
    }, 300);
}).mouseleave(function () {
    $(this).find('.item-overlay').css('z-index', '1');
});
Aditya Singh
  • 9,512
  • 5
  • 32
  • 55