Don't Automatically Hover on new navigated page

I have the following menu that changes to red if each of the menu items are hovered over.

This menu shows on every page of my website.

I have the following problem:

If a user was to click a menu item (e.g. Menu 2), the page will navigation to the page set in the a tag (i.e page2.html)

If the user was to leave there mouse in the same position as it was in before the menu item was clicked (i.e. over the selected menu item), then the menu would automatically change to red again on the new page, as the jQuery hover code below will be activated.

Is there a way to stop this behaviour? Ideally I want users to have to mouse off of the menu item and then on it again before the menu item changes to red if the users mouse is still over the selected menu item after clicking one of the menu links.

<script type="text/javascript">
   $(document).ready(function() {
       $('li').hover(function() {
            $(this).css('background', 'red');
        }, function() {
            $(this).css('background', 'none');
        })
   })
</script>

<ul>
    <li><a href="page1.html">Menu 1</a></li>
    <li><a href="page2.html">Menu 2</a></li>
    <li><a href="page3.html">Menu 3</a></li>
</ul>

HTML:

 

first
use CSS :hover instead of jQuery's .hover()

second
one kind of a solution could be that you check if the menuitem was hovered with .is(':hover') on pageload, apply a 'pointer-events' with 'none' value with .css(), then you can store this state in a boolean (like 'isHovered') and simply unset it on mouseout (and remove the 'pointer-events' css from the element it was set on)

 

Would it be possible to provide me with an example?
Also, what happens if the users browser doesn't support the CSS :hover effect?

 

All browsers support :hover - the only ones NOT supporting it are screen-readers and text-based browsers, but they don't support graphics and colors anyway, so...

 

I saw this, and all I can think is Why the devil are you using Javascript to do CSS' job?!? Much less the fat bloated idiotic train wreck of stupidity known as jQuery for it?!? Admittedly, the moment I see jQuery I can assume that it's being misused for things that should be done in CSS, things that could be written cleaner without the framework crap, or crap that doesn't even belong on a website in the first damned place.

I would also suggest NOT setting appearance on the LI in a menu, it's unreliable and can become a headache in IE8 thanks to the staircase bug.

<ul id="mainMenu">
	<li><a href="page1.html">Menu 1</a></li>
	<li><a href="page2.html">Menu 2</a></li>
	<li><a href="page3.html">Menu 3</a></li>
</ul>

Code (markup):

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	background:red;
}

Code (markup):

I also target :focus and :active so people navigating via keyboard get the effect too. Some older versions of IE don't do :focus for keyboard and see :active instead

NOT EVEN JAVASCRIPTS JOB! It's stuff like this that proves developers are dumber for nonsense like jQuery even existing. I award no points, and may God have mercy on John Resig's soul.