jquery懸停並保持到鼠標移出

我試圖創建一個「購物車」鏈接，其中購物車在懸停時打開。我可以讓車在懸停時開出，並在離開時關閉。然而，我無法讓購物車塊在懸停後保持打開狀態。如果您將鼠標懸停在其上，我希望汽車座椅在懸停時打開並保持打開狀態。如果您將鼠標懸停在此頁面右上角的「購物車」鏈接上，您會看到我的意思。jquery懸停並保持到鼠標移出

http://dl.dropbox.com/u/4380589/Rococlothing/index.html

的我使用jQuery是：

jQuery('#cart-links .links .first a').mouseover(function(){ 
    jQuery('.block-cart').slideDown(400); 
}).mouseout(function(){ 
    jQuery('.block-cart').slideUp(400); 
}); 

jQuery(".block-cart").mouseover(function(){ 
jQuery(this).show(); 
}).mouseout(function(){ 
jQuery(this).fadeOut("slow"); 
});

來源

2011-06-14 Glynn

http://jsfiddle.net/kongr45gpen/K55ct/1/ – kongr45gpen 2011-06-14 14:34:45

hovered = false; 

jQuery('#cart-links .links .first a').mouseover(function(){ 
    jQuery('.block-cart').slideDown(400); 
}).mouseout(function(){ 
     setTimeout(function(){ 
     if(!hovered) { 
     jQuery('.block-cart').slideUp(400); 
     }}, 250); 
    }); 

jQuery(".block-cart").mouseover(function(){ 
hovered = true; 
}).mouseout(function(){ 
hovered = false; 
jQuery('#cart-links .links .first a').trigger("mouseout"); 
});

來源

2011-06-14 15:05:12 Detect

其實，我更喜歡@ kongr45gpen的解決方案。它使用'.mouseleave（）'，'.mouseenter（）'，並重新排列HTML，所以'block-cart'在'＃cart-links'內。 – Detect 2011-06-14 15:07:21

非常感謝您的幫助。我無法獲得cart-block作爲子html，所以我選擇了'Detect's reposnse，它完美的工作！ :) – Glynn 2011-06-15 10:21:30

您需要取消第一mouseout()所以你需要的第二部分調整到

jQuery(".block-cart").mouseover(function(){ 
jQuery(this).stop(true).show(); 
}).mouseout(function(){ 
jQuery(this).fadeOut("slow"); 
});

注意， stop，我傳遞true以清除當前的動畫隊列。停止的jQuery文檔是@http://api.jquery.com/stop/

來源

2011-06-14 14:13:24

看起來.block-cart不是觸發懸停的元素的子元素，所以爲了保持懸停狀態處於活動狀態，您必須以某種方式構建HTML .block-cart是觸發懸停的元素的子元素。

順便說一句：你爲什麼不使用$(this).hover()而不是$(this).mouseover().mouseout()，這是一個更容易一些

來源

2011-06-14 14:14:57 m90

您好感謝您的幫助，我很遺憾試圖讓html成爲所需元素的孩子時遇到了很多麻煩。這是因爲該網站基於magento購物車軟件，並且很難改變。我認爲，如果有一種方法可以延遲懸停在購物車鏈接上的鼠標懸停，我可能會初始化塊車功能的懸停，因此購物車不會消失。這是可能的 – Glynn 2011-06-14 15:59:58

jquery懸停並保持到鼠標移出

回答

相關問題