懸停類刪除onload，當光標在jQuery上的項目

我正在建立一個網站與jQuery懸停功能，用data-hover-src中的交換當前圖像，並將類'懸停'添加到.product-overlay，以便我可以使用CSS在用戶懸停在每個列表項上時顯示它。懸停類刪除onload，當光標在jQuery上的項目

所有很簡單的東西，但是，如果用戶在頁面加載時，我的代碼做什麼，我想，即它刪除的.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/

VIDEO

...所以這裏發生了什麼事的視頻，使其更清晰：

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

來源

2015-02-06 Osu

我不能與小提琴隊友發現任何問題.. – Outlooker 2015-02-06 10:42:16

嗯，我知道了小提琴實際上並沒有顯示的行爲（可能是因爲它加載所有的JS之前的HTML和圖像 - 我的工作一個私人Shopify網站，在這裏我看到了問題，理想情況下，我可以共享一個直接鏈接，但目前還無法做到這一點。是否有任何方法檢查頁面是否存在「鼠標懸停」，然後修改我的代碼顯示/隱藏相應的'.hover'類 – Osu 2015-02-06 10:53:52

或許檢查覆蓋是「可見的」第一 – Osu 2015-02-06 10:54:40

最後，我需要使用該插件hoverIntent，因爲它似乎在運行'hoverswap'函數之前需要稍微延遲才能按照預期的方式工作。我正在使用的代碼是：

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

我試着做同樣的事情，只有在鏈中的delay即

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

但是，這並沒有工作，因此需要一個插件。如果有人有一個不需要插件的解決方案，請分享，因爲我渴望學習替代品。

來源

2015-02-10 16:52:17 Osu

我不知道有多少，這可能幫助，因爲我真的不能看到issue.Try檢查這些步驟

1.You可以嘗試，如果所有圖像都執行之前，您的網站加載檢查腳本動作。這是比較容易檢查所有圖像和其他一切已加載使用load()功能

嘗試使用

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

要檢查元素是否是可見的，你可以嘗試利用該:visible選擇的

實施例

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

來源

2015-02-06 11:20:58 Outlooker

嗨，謝謝你的回答，但不幸的是，它還沒有解決這個問題。我有點卡住，以什麼做的是誠實... – Osu 2015-02-10 11:18:03

你能分享烏爾網站link.If其可訪問的WIL盡力幫助你出來 – Outlooker 2015-02-10 11:21:19

這是密碼保護在這個階段，所以如果你是開心我私下傳遞給你細節，然後我們可以在這裏發佈解決方案，假設我們找到了 - 達到你的最佳方式是什麼？ – Osu 2015-02-10 11:24:56

懸停類刪除onload，當光標在jQuery上的項目

回答

相關問題