I would like to trigger a mouseenter on my menu item '#currentitem a'
when my page loads. That I have done with:
$(document).ready(function(){
$("#currentitem a").trigger('mouseenter');
});
My problem is that if I mouseenter (manually) another item, the triggered (with code above) item doesn't mouseleave. Menu items overlap.
I am a newbie, I would like to achieve the following if it is possible?
- mouseenter
'#currentitem a'
on pageload. - mouseleave
'#currentitem a'
when another item has a mouseenter triggered. - When that menu item triggers mouseleave, mouseenter
'#currentitem a'
so the item is always triggered when nothing else is.
The menu is part of a more complex jQuery setup, and not just plain CSS so this is the best way I can see to do it. Any help would be much appreciated.
I have now created a JSFiddle to show what I am trying to do: