javascript/jquery ignore or override :hover style <p><strong>Short Description:</strong> I want to use JS/JQuery to take precedence over the CSS :hover psuedo-class for specific brief moments without removing the CSS rule for the other <em>majority</em> of cases. Since the site is already script-heavy enough I'm trying to find a solution that doesn't require me to nuke the CSS interaction and rely on mouseover/mouseout events. In my case there's a marked performance difference between the two.</p> <p><strong>Details:</strong> I've created a CSS-based dropdown shopping cart viewer. I rigged up some JQuery to force the cart open when the user triggers certain page interactions like adding an item to the cart. When the cart is "programmatically opened" an 8 second timer is used to close it. All that works. <strong>The Problem:</strong> I also want to add a click handler to the cart so that when the user clicks on it it will be explicitly closed whether the 8second timeout has expired or not. However, when they click on the cart they are - by definition - hovering over it, kicking in the :hover state and keeping it from closing. Is there a way to temporarily disable the :hover rule and then once the cart has closed reinstate it.</p> <p><strong>HTML:</strong></p> <pre><code>&lt;span class="minicart-wrapper"&gt; &lt;a class="minicart-anchor" href="..."&gt;Shopping Cart&lt;/a&gt; &lt;div id="minicart"&gt; ... &lt;/div&gt; &lt;/span&gt; </code></pre> <p><strong>CSS:</strong></p> <pre><code>.minicart-wrapper #minicart { display: none; } .minicart-wrapper:hover #minicart, .minicart-wrapper #minicart.open { display: block; } </code></pre> <p><strong>JQuery:</strong></p> <pre><code>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); } </code></pre> <p><strike><strong>I've tried:</strong> a few suggestions I found here like changing <code>.minicart-wrapper:hover #minicart</code> to <code>.minicart-wrapper:hover #minicart.canhover</code>. I then added <code>removeClass(canhover)</code> to the beginning of closeMinicart() and <code>setTimeout(function(){jQuery('#minicart').addClass('canhover')},500);</code> to the end of it. However it seems that this is too short a timeout for the browser to refresh it's hover-state and before it's done rendering the hover re-triggers and the cart stays put.</strike></p> <p>Thanks for any suggestions.</p> <p><strong>Edit:</strong> Thanks Jedison. Here's the JSFiddle: <a href="http://jsfiddle.net/WJS3h/" rel="nofollow">http://jsfiddle.net/WJS3h/</a> . Also fixed some bugs in the sample.</p> <p><strong>Edit 2:</strong> Turns out I had a code error (oops) and the can-not-hover class method is the way to go. Thanks to everyone who commented.</p>