Cancel :hover with Javascript

Hello everyone,

I have a tricky problem.

I have a pure-CSS menu which makes us of :hover to show it’s contents (standard nested unordered lists).

Now, when the various menu items are clicked, I want to cancel the hover effect so it’ll disappear, using Javascript.

Anyone have any ideas?


What does it matter if the links hide or not? Surely the user will be navigated away from the page too soon to care…?

You should be able to use CSS to control the hover effect of the link.

You can use the “active” pseudo-selector for when someone clicks on it, and “focus” for when someone uses keyboard navigation instead.

Sorry, I didn’t explain very clearly.

This isn’t a normal website, it’s a web-app, so they’ll potential spend several hours on the same page. The different menu options are actually part of a menubar, just like Firefox has and I’m trying to replicate that sort of feel. In applications, when you click a menu item, the menu itself goes away and whatever you clicked takes affect.

That’s why I need to be able to hide the menu via Javascript.


P.S. Also, there are no anchor elements, all of the menu items are assigned functions based on their id when the program initializes.

it seems that the answer may be simpler than everyone suspects.

Each click on a menu item triggers an onclick event that toggles a class on that menu item, the class triggering the visibility of the menu itself.

I’m a bit confused.

Real quick, the menu I have looks like this:

<ul id="nav">
  <li>Menu Title
      <li id="menuitem">Menu Item</li>

Now, basically the code to show and hide it is:

#nav li ul {
    display: none;

#nav li:hover ul {
    display: block;

Now when the Javascript initalizes, it goes through and gets the id of each menu item, and if there is a function with that name, it assigns adds an event listener for the click, which looks like this:

menuitem.addEventListener('click', function() { theFunction(); // --- // }, true);

Now, what I’m looking for is the Javascript to put in to replace the — which will make it disappear. Right now, when it clicks, the menu just stays put.

I’ve tried setting it’s parent to display: none then back to display: block, but it occurs to fast to make it remove the hover. If I just set it to display: none, it breaks the menu item and it never reappears.

Any ideas?

The CSS hover pseudo-selector will always be active when you hover. The only way to stop it hovering is to change the element or the structure so that the hover pseudo-class does not take effect.

The way around that limitation is to not use the hover pseudo-class at all, and instead to use a hover class, in which you will use onmouseover to toggle the hover class for the menu item.

Or to put it plainly, when you want scripting to control hover/click states of a menu, you need to script the hover/click events of the menu. That means no CSS hover pseudo-classes.


I was afraid of that. There isn’t really any technical reason not to do it that way, I just hate using JS to control that stuff. =p

Was hoping there was a way around it.

Anyways, thanks for the help.

  • Chris

Lol, that was so much easier…

But it’s fun being stubborn sometimes. In this case it didn’t do much good, but in lots of other similar cases I’ve learned new things that are better than my old ways. :wink: