How to hide element that is currently mousedover and shown via :hover css pseudo class via jQuery

I have a navigation that is hidden out of the viewport via css and shown on hover of the containing li via the :hover pseudo class. Markup and css below.

ul li div#someid{position:absolute;left:-9999px;opacity:0;}
ul li:hover div#someid { left:0;opacity:1;z-index:9000;}




 <ul>
     <li>
     <div>The Content to Hide <a href="#runAjax">Click Me</a></div>
     </li>
 </ul>

Upon click of the "Click Me" I run some jQuery that will populate a part of the page based on the hash value. This all works fine. What I am trying to do is force the <div>...</div> that is currently being shown via the :hover css to hide.

I have read and tried to set the .css('left','-9999px'); as well as .removeClass("hover"); and of course I have tried .hide() but this prevents it from being visible and still shows as the mouse is hovering over the link once mouseOut occurs it is then hidden in the d开发者_开发知识库om unless set to .show()

Any ideas on what I am doing wrong or how I can remove the hover/mouseover behavior via jQuery.

Thanks in advance gurus.

Afraid you cannot achieve this as long as you're using the :hover pseudo class.

If can live without using the :hover class, here's how you can do it via jQuery: http://jsfiddle.net/jHatE/

I'd suggest using JS to add a class to the element you want to hide and have some CSS (after the :hover CSS) that hides any element with that class.

Since the CSS for the new class that hides it is after the CSS that shows it, the element will be hidden as long as your CSS specificity doesn't override that.

Adding/removing classes is often a really nice way to control which CSS style rules control a given element.

For example, create this CSS style rule after your other styles rules that affect this object:

.hidden {opacity: 0;}

And add the "hidden" class to the object. When you want it to show on hover again, you just remove the "hidden" class.