当光标悬停在jQuery中的项目上时，悬停类删除了onload答案

【问题标题】：Hover class removed onload when cursor over item in jQuery当光标悬停在jQuery中的项目上时，悬停类删除了onload
【发布时间】：2015-02-06 10:36:20
【问题描述】：

我正在构建一个带有 jQuery 悬停功能的网站，该功能将当前图像替换为 data-hover-src 中的图像，并将“悬停”类添加到 .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

【问题讨论】：

我找不到小提琴伴侣的任何问题..
啊，我意识到小提琴实际上并没有显示行为（可能是因为它在 JS 之前加载了所有 HTML 和图像 - 我正在一个私人 Shopify 网站上工作，我在这里我看到了问题。理想情况下，我可以共享一个直接链接，但此时这是不可能的。有没有办法检查页面是否有“鼠标悬停”加载，然后修改我的代码以显示/隐藏@987654329相应地@类？
或者先检查覆盖是否“可见”？
您可以尝试在执行悬停功能之前检查图像是否已加载
感谢 Outlooker - 我已在此问题的描述中添加了一个视频，以向您展示我在网站上看到的内容，因为显然这很难修复而无法重现。跨度>

标签： jquery overlay jquery-hover

【解决方案1】：

我不知道这有多大帮助，因为我看不到问题。请尝试检查这些步骤

1.在执行脚本操作之前，您可以尝试检查是否所有图像都已加载到您的网站中。使用load() 函数可以更轻松地检查所有图像和其他所有内容是否已加载

尝试使用

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

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

例子

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

【讨论】：

您好，感谢您的回答，但不幸的是，它并没有解决问题。老实说，我有点不知道该怎么做......
你能分享你的网站链接吗？如果它可以访问，会尽力帮助你
它在这个阶段受密码保护，所以如果您愿意我私下将详细信息传递给您，那么我们可以在这里发布解决方案，假设我们找到了它 - 联系您的最佳方式是什么?
你能提供一张你的情况的 gif 图像吗？我认为可以
看一下描述，我已经放了一段正在发生的事情的视频：youtube.com/watch?v=ZaslRbKGdKM，如果你需要一个 gif，在这里：share.gifyoutube.com/vMlQob.gif

【解决方案2】：

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

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

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

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

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

【讨论】：