Don't Automatically Hover on new navigated page

[FishSword]

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>

[CroNiX]

Probably just set all of your li to background none before your hover code.

Edited August 3, 2014 by CroNiX

[Andy11548]

Hello,

 

Are you trying to make it so that while the mouse is on the navigation button the background of the button changes to red, once the mouse is removed, it should change back to it's default colour? Sorry, I didn't understand your query.