Is it possible to remove cursor focus using javascript?

JavaScript
1

Hi,

I have an accordion like navigation bar.

In FireFox, when one clicks on a fold and the fold expands, and if the mouse pointer is over the expanding content, then focus is drawn to each of the sub-menu items as they pass the mouse pointer. This makes the animation look a bit juddery.

In all other browsers, one clicks on a fold, focus is drawn away from the mouse pointer, the fold expands and then when one moves the mouse again the mouse pointer gets its focus back.

You can see this best by clicking on the tabs “curriculum”, then “admission”, first in IE and then in Firefox.

Is there any way to make the mouse pointer give up its focus in Firefox, so when the animation is taking place it ignores such rules as

.sub_link:hover{
background-color:#E8EFCF;
}

which have been applied to the sub-menu items?

Ideal would be something like “cursor.blur();” although obviously that won’t work.

Hope I explained that well enough.

Thanks in advance.

2

If I were you I try to play with
.AccordionFocused .sub_link{background-color:#fff}
.AccordionPanelClosed .sub_link{background-color:#fff}
.AccordionPanelOpen .sub_link{background-color:#fff}
.AccordionPanelOpen .sub_link:hover{background-color:#E8EFCF;}
but it not works for me, I am not sure when the className is added to panel

3

Hi,
Thanks a lot for your reply. It got me thinking along the right lines.
I ended up using setTimeout to ensure that the class “.AccordionPanelOpen” wasn’t applied until the animation had been completed.
Then I changed:

.sub_link:hover{
background-color:#E8EFCF;
}

etc, into:

.AccordionPanelOpen .sub_link:hover{
background-color:#E8EFCF;
}

et voilà, problem solved.
Thanks again.