Q:

Ignoring CSS :hover, :active, :focus declarations with CSS

I have a few links that when clicked, will open up a submenu. This is achieved by :hover, :focus, and :active declarations in my style sheet.
The effect is identical to this: http://www.cssplay.co.uk/menus/cssplay-click-flyout.html.
The thing is that while the CSS implementation works, there are various shortcomings, which I would like to fix with JavaScript. I am using YUI 3.5.0 as my javascript library. Is it possible to use JavaScript  to ignore the :hover, :focus and :active declarations in the stylesheet?
I am aware that I can put those declarations into a separate class and change the class of the element with JavaScript, but it doesn't seem very clean to me.

A:

I am aware that I can put those declarations into a separate class and change the class of the element with JavaScript, but it doesn't seem very clean to me.

That is as clean as it gets. A much less sanitary solution would be to duplicate the styles from your generic rules and inject them directly into your elements.

