当光标悬停在 jQuery 中的项目上时，将鼠标悬停 class 移除加载

Question

我正在构建一个具有 jQuery 悬停功能的网站，该功能可将当前图像与 data-hover-src 中的图像交换，并将 class 'hover' 添加到 .product-overlay 以便我可以使用 CSS 在用户将鼠标悬停在每个列表项上时显示它。

所有非常简单的东西，但是，如果用户在页面加载时将光标悬停在列表项上，我的代码会执行与我想要的相反的操作，即它删除 .hover class 鼠标移开。

有没有办法确保 .hover class 仅在光标位于列表项上时添加？

谢谢，

奥苏

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

这是一个如何设置的示例 - 这只是为了查看悬停功能，出于某种原因我无法重现我在 fiddle 中看到的问题...

http://jsfiddle.net/wn7t7kh7/

视频

...所以这里有一段视频让事情变得更清楚：

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

Answer 1

我不知道这有多大帮助，因为我无法真正看到 issue.Try 检查这些步骤

1.You 可以在执行脚本操作之前尝试检查是否所有图像都已加载到您的网站中。使用 load() 函数

可以更轻松地检查所有图像和其他所有内容是否已加载

尝试使用

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

要检查元素是否可见，您可以尝试使用 :visible 选择器

示例

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

Answer 2

最后，我需要使用插件 hoverIntent，因为在运行 'hoverswap' 功能之前似乎需要稍微延迟才能使其按预期方式工作。我使用的代码是：

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

我尝试用链中的 delay 做同样的事情，即

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

但这没有用，因此需要一个插件。如果有人有不需要插件的解决方案，请分享，因为我很想学习替代方案。

当光标悬停在 jQuery 中的项目上时，将鼠标悬停 class 移除加载

Hover class removed onload when cursor over item in jQuery

jquery

overlay

jquery-hover