Класс Hover удаляется при загрузке при курсоре над элементом в jQuery

Question

Я создаю сайт с функцией наведения jQuery, которая свопирует текущее изображение с изображением в data-hover-src и добавляет класс 'hover' к .product-overlay, так что я могу использовать CSS чтобы показать это, когда пользователь наводится на каждый элемент списка.

Все довольно простые вещи, однако, если пользователь имеет свой курсор на элементе списка при загрузке страницы, мой код делает обратную, что я хочу, то он удаляет .hover класса по отведению указателя мыши.

Есть ли способ убедиться, что класс .hover добавлен только тогда, когда курсор находится над элементом списка?

Спасибо,

ОГУ

HTML

<ul class="product-listing"> 
<li class="item"> 
    <a href="#" class="product-images"> 
     <img src="{src1}" data-hover-src="{src2}"> 
    </a> 
    <span class="product-overlay hidden"> 
     Overlay content 
    </span> 
    </li> 
    <li> 
    ...etc. 
    </li> 
</ul> 

Jquery

// Hoverswap function 
    var hoverSwap = function() { 
    var $this  = $(this).find('img'); 
    var overlay  = $(this).find('.product-overlay'); 
    var newSource  = $this.data('hover-src'); 
    $this.data('hover-src', $this.attr('src')); // Show original source if hover-src is showing 
    $this.attr('src', newSource); // Vice versa 
    if(overlay.hasClass('hover')) { 
     overlay.removeClass('hover'); 
    } else { 
     overlay.addClass('hover'); 
    } 
    } 

// Run function 
$('.product-listing li').hover(hoverSwap, hoverSwap); 

JSFIDDLE

Вот пример того, как он настроен - это только увидеть парить над функцией, я не могу воспроизвести проблему я вижу с этой скрипкой по какой-то причине ...

http://jsfiddle.net/wn7t7kh7/

вИДЕО

... так вот видео того, что происходит, чтобы сделать его более ясным:

https://www.youtube.com/watch?v=ZaslRbKGdKM

Answer 1

в конце концов, мне нужно было использовать плагин hoverIntent как это кажется, требуется легкая задержка перед запуском функции «hoverswap», чтобы она работала так, как она предназначена. Код я использую:

$('.product-listing li').hoverIntent({ 
     over: hoverSwap, 
     out: hoverSwap, 
     interval: 10 
}); 

Я попытался сделать то же самое с только delay в цепи, т.е.

$('.product-listing li').delay(100).hover(hoverSwap, hoverSwap); 

Но это не сработало, следовательно, необходим плагин. Если у кого-то есть решение, для которого не требуется плагин, поделитесь им, поскольку я заинтересован в изучении альтернатив.

Answer 2

Я не знаю, сколько это может помочь, потому что я не могу увидеть issue.Try проверить эти шаги

1.You может попытаться проверить, если будут загружены все изображения на вашем сайте, прежде чем выполнять сценарий действие. Это проще, чтобы проверить, что все изображения и все остальное загружается с помощью load() функции

Попробуйте использовать

$(window).load(function() { 
    //Your code here 
}); 

Чтобы проверить, является ли элемент видимым вы могли бы попробовать сделать использование селектора :visible

Пример

$("#selector:visible").click(function() { 
    $(this).css("height", "100px"); 
});