jquery show/hide on hover。內容隱藏時隱藏

http://wilwaldon.com/gift/index.html是頁面問題。jquery show/hide on hover。內容隱藏時隱藏

這裏的HTML/jQuery的的引擎收錄：http://pastebin.com/L4HQBjBc

引擎收錄的jQuery：http://pastebin.com/WmEUK7Ey

如果懸停上面的大圖標「立即激活」按鈕，在右側（衛星天線，公文包，鎖定）div會出現。

所需的操作是div在懸停時出現並在懸停時消失。

發生什麼事是，如果你將鼠標懸停在彈出窗口的文本上，div就會消失。

在此先感謝！

來源

2011-03-24 wilwaldon

而不是使用的.hover()第二部分是相同的作爲.mouseout()離開它並將第二個功能更改爲.mouseleave()。當鼠標移出calloutpop時，懸停的第二部分將被調用，當鼠標移過文本時，鼠標將移動到它自己的div中。使用.mouseleave()將在鼠標離開div時調用，而不是在它懸停在其中的元素上時調用。

此外，你應該等待DOM是做任何jQuery函數之前做好準備，在你只等着.hide()彈出的瞬間：

jQuery(document).ready(function() { 
    // hides the slickbox as soon as the DOM is ready 
    jQuery('#calloutpop').hide(); 
    jQuery('#callout').hover(function() { 
     jQuery('#calloutpop').fadeIn(500); 
    }); 
    jQuery('#calloutpop').mouseleave(function(event) { 
      jQuery(this).fadeOut(500); 
    }); 
});

看到它working here

來源

2011-03-24 18:29:24 Scoobler

工作完美，非常感謝。 – wilwaldon 2011-03-24 18:43:16

沒問題，很高興幫助！ – Scoobler 2011-03-24 18:53:19

有趣。所有這四個答案都有一個投票。這個有兩個upvotes（得分爲1），另外三個有upvote來反擊downvote。我想知道爲什麼。（對於那些不知道的人，[擁有1000名聲望的用戶可以看到最後得分而不是最後得票數]） – 2011-03-25 18:04:31

也許如果你沒有處理程序的功能做任何事情或只使用.mouseenter（）你的問題將得到解決。我想現在發生的事情是，因爲你出現的div覆蓋了觸發元素，所以只要鼠標碰到不是觸發器的東西（彈出的div的文本）就會觸發鼠標輸出（

您彈出的鼠標已經到位，否則應該照顧隱藏。

試試這個

jQuery('#callout').mouseenter(function() { 
    jQuery('#calloutpop').fadeIn(500); 
}); 

jQuery('#calloutpop').mouseout(function(event) { 
    if (!$(event.relatedTarget).is('#callout')) { 
     jQuery('#calloutpop').fadeOut(500); 
    } 
});

來源

2011-03-24 18:15:14 jdcook72

您註冊一個懸停監聽到整個DIV。第一次你將鼠標懸停在它上面時，它會打開。然後，如果用戶經過其中一個包含圖標，則會在包含的圖標上觸發懸停事件。在JavaScript事件中引發了DOM（關鍵字：event propagation）。因此，懸停事件將傳播到您已註冊懸停偵聽器的父分區。這會導致div隱藏。

你可以只是調用event.stopPropagation（）的圖標註冊懸停監聽器停止這樣的傳播：

$('.icons_in_hover').hover(function(e){ 
    e.stopPropagation(); 
});

來源

2011-03-24 18:18:09 BernardMarx

春節擺脫mouseout代碼並將您的hover代碼更改爲：

jQuery('#callout').hover(
    function() {jQuery('#calloutpop').fadeIn(500)} 
    , 
    function() {jQuery('#calloutpop').fadeOut(500)} 
);

來源

2011-03-24 18:33:04 Neil

jquery show/hide on hover。內容隱藏時隱藏

回答

相關問題