的JavaScript/jQuery的忽視或忽略：hover樣式

簡述：我想用JS/jQuery來優先於CSS：懸停僞類特定短暫的時刻，而不爲其他多數移除CSS規則的情況。由於該站點已經足夠腳本，我正試圖找到一個解決方案，不需要我加入CSS交互並依靠mouseover/mouseout事件。在我的情況下，兩者之間有明顯的性能差異。的JavaScript/jQuery的忽視或忽略：hover樣式

詳情： 我創建了一個基於CSS的下拉式購物車查看器。我安裝了一些JQuery，當用戶觸發某些頁面交互操作（如將商品添加到購物車）時強制購物車打開。當購物車「以編程方式打開」時，使用8秒計時器關閉它。所有的工作。 問題：我也想添加一個點擊處理程序到購物車，以便當用戶點擊它時，無論8秒超時是否已過期，它都將被顯式關閉。但是，當他們點擊購物車時 - 按照定義 - 在其上方懸停，踢入：懸停狀態並保持關閉狀態。有沒有辦法暫時禁用：懸停規則，然後一旦購物車關閉，恢復它。

HTML：

<span class="minicart-wrapper"> 
    <a class="minicart-anchor" href="...">Shopping Cart</a> 
    <div id="minicart"> 
     ... 
    </div> 
</span>

CSS：

.minicart-wrapper #minicart { display: none; } 
.minicart-wrapper:hover #minicart, 
.minicart-wrapper #minicart.open { display: block; }

JQuery的：

function openMinicart() { 
    var minicart = jQuery('#minicart'); 
    minicart.addClass('open'); 
    minicart.bind('click', {}, closeMinicart); 
    window.setTimeout(closeMinicart, 8000); 
} 

function closeMinicart() { 
    var minicart = jQuery('#minicart'); 
    minicart.removeClass('open'); 
    minicart.unbind('click', closeMinicart); 
}

我試過了：我在這裏發現了一些建議，如將 .minicart-wrapper:hover #minicart更改爲 .minicart-wrapper:hover #minicart.canhover。然後我將 removeClass(canhover)添加到closeMinicart（）和 setTimeout(function(){jQuery('#minicart').addClass('canhover')},500);的開頭。然而，這似乎是瀏覽器刷新懸停狀態的時間太短，並且在完成渲染之後，懸停重新觸發器和購物車仍處於放置狀態。

感謝您的任何建議。

編輯：謝謝Jedison。這裏是JSFiddle：http://jsfiddle.net/WJS3h/。還修復了示例中的一些錯誤。

編輯2：原來我有一個代碼錯誤（oops），而can-not-hover類方法是要走的路。感謝所有評論過的人。

來源

2014-04-24 tbernard

我建議你製作一個JSFiddle，以便我們可以嘗試和給你一個解決方案。 – jedison

做到這一點的一種方法是添加一個類來阻止懸停，然後在關閉下拉列表時將其刪除。然後，您可以在該類的懸停僞類上放置一些.css，以阻止懸停類。

事情是這樣的：

#minicart {display: 'none'} 
#minicart:hover {display: 'block'} 
#minicart.noHoverCss:hover {display: ''}

添加noHoverCss到購物車中openMinicart和closeMinicart刪除它。

在完成closeMinicart之後，您也可以將其刪除一段時間，以便用戶有足夠的時間將鼠標移開而不會觸發懸停。

編輯兩個：

你可以做的另一件事是採取內聯的CSS勝過的.css從樣式表的事實。不要使用css類（open）來設置display: block，而是使用內聯。同樣，當您退出時，將css設置爲display : none以強制隱藏下拉菜單，然後在超時後將css設置爲display : ''以恢復您的默認懸停行爲。

這裏有一個更新的小提琴：fiddle

來源

2014-04-24 15:57:27 ckersch

謝謝@ckersch。我已經嘗試過，並沒有奏效。我只是重新嘗試，以確保它不是我的錯誤。雖然它在JSFiddle中效果很好，但它在實際網站上無法正常工作。據推測這是因爲我們臃腫的（Magento）網站和小提琴理想情況之間的渲染時間差異很大。我甚至在1秒延遲後嘗試刪除noHoverCSS類，仍然沒有工作。 – tbernard

查看更新的小提琴。我使用內聯css來重寫打開/關閉的樣式，但是當您想要關閉時，您可以輕鬆地執行此操作。這個想法是，內聯的CSS將勝過樣式表，所以你可以使用它來強制下拉關閉，然後刪除內聯的CSS關閉後恢復默認功能。 – ckersch

實現了我阻止了一些功能。修正並更新小提琴。 – ckersch

所以，你要阻止懸停命令，當你點擊它的東西？

你可以創建一個額外的類來監聽你的懸停。如果箱子應該打開，額外的班級可以發出信號：

這有點難看，但有訣竅。

jsfiddle: http://jsfiddle.net/kychan/zH3x5/ 

// add listener to minicart. 
var anchor = $('.minicart-anchor'); 
var cart = $('#minicart'); 

// our functions that will be executed on the events. 
var close = function() { 
    cart.slideUp(500); 
}, 
    open = function() { 
    // if it has class 'stayClosed' don't do anything. 
    if (cart.hasClass('stayClosed')) return; 
    // else, slide! 
    cart.slideDown(500); 
}; 

// bind to event: hover. 
anchor.hover(open, close).click(function() { 
    // add or remove 'stayClosed' class on click. 
    if (cart.hasClass('stayClosed')) 
    { 
     // don't stay closed when the user clicks again. 
     cart.removeClass('stayClosed'); 

     // automatically open it again. 
     open(); 
    } 
    else 
    { 
     // stay closed, even on hover. 
     cart.addClass('stayClosed'); 

     // automatically close it. 
     close(); 
    } 
}); 

// initially hide it. 
cart.hide();

來源

2014-04-24 16:07:38 Kai

的JavaScript/jQuery的忽視或忽略：hover樣式

回答

相關問題