jQuery-從懸停中排除

在我的代碼中，將鼠標懸停在圖像上會在該圖像的頂部創建一個「.pin_it」類的新鏈接。如果用戶將鼠標從圖像上移開，則應該隱藏.pin_it。但是，如果他們將鼠標移動到新的.pin_it上，它應該保持可見狀態。jQuery-從懸停中排除

我已經得到了這一切工作。問題在於，在他們結束了.pin_it之後，移動到圖像外應該隱藏.pin_it，但它不會。然後，如果您將鼠標懸停回來，它會添加另一個.pin_it，但不會再尊重鼠標移出行爲。

我在做什麼錯？

JS小提琴 - >http://jsfiddle.net/kthornbloom/rKZK5/2/

代碼：

$('img').hover(
function() { 
    var imgWidth = $(this).width(); 
    var imgPosition = $(this).offset(); 
    if(imgWidth > 300) { 
     $('body').append('<a href="#" class="pin_it">Pin It</a>'); 
     $('.pin_it').css(imgPosition); 
    } 
    else { 
     // Do Nothing 
    } 
}, function() { 
    var isHovered = $('.pin_it').is(":hover"); 

    if (isHovered == true) { 
     //Do nothing 
    } else { 
    $('.pin_it').remove();  
    } 
});

來源

2013-10-18 kthornbloom

更新 - 我已經得到它大多修復。現在唯一的問題是，如果您將鼠標懸停在「固定它」按鈕上，然後在不觸摸圖像的情況下關閉到左側，它將保持可見而不是隱藏。 http://jsfiddle.net/kthornbloom/rKZK5/4/ – kthornbloom

你可以重新考慮你的標記，通過：

添加的包裝爲你的形象，將裏面的針按鈕，設置爲不可見
當你懸停包裝顯示按鈕
當你離開包裝隱藏按鈕

代碼：

$('#imgWrapper').hover(

function() { 
    var imgWidth = $(this).width(); 
    var imgPosition = $(this).offset(); 
    if (imgWidth > 300) { 
     $('.pin_it').css(imgPosition).show(); 
    } else { 
     // 
    } 
}, function() { 
    $('.pin_it').hide(); 
});

你必須重DOM操作沒有問題，從添加/刪除元素，並且代碼看起來簡單。

演示：http://jsfiddle.net/IrvinDominin/fzM7k/

來源

2013-10-18 16:58:02

這是應該如何做，但。 – Trevor

絕對同意，雖然我正在寫這個小腳本放在一個網站上，我不控制標記。規則是它應該自動適用於任何大於300像素的圖像。 – kthornbloom

在domready事件中，您可以用div封裝所有圖像並插入按鈕，我認爲您可以用這種方式處理問題 –

jQuery-從懸停中排除

回答

相關問題