Question

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

所有非常简单的东西，但是，如果用户在页面加载时将光标放在列表项上，我的代码与我想要的相反，即删除 .hover关于mouseout的课程。

有没有办法确保仅当光标位于列表项上时才添加.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

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

1.在执行脚本操作之前，您可以尝试检查网站上是否已加载所有图像。使用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中的项目上时，悬停类删除了onload

2 个答案: