Search code examples
javascriptcssyuipseudo-class

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.

Solution

  • 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.