This is a really basic question: what does blur mean, or what does it do when used in links as described below?

I've tested it on Firefox 3.6 and Opera 11 and it behaves as I hope except for one thing. During testing if I use both keyboard and mouse to navigate within the same session, the browser history for the 'other' method is wiped out; it won't go backwards beyond the most recently used method.
Is this not a surprise when you know what blur really means?

I want the following (assuming Javascript is enabled):
a) Keyboard users to see a focus outline on navigation links.
b) Keyboard users to see the outline still there if they use the browser Back button, and continue tabbing from that link onwards.
c) Mouse users to NOT see an outline if they use the browser Back button.

I don't know JavaScript and the following is simple for me to implement.

html (for the top and side nav):
<div id="topnav"><div class="nav">
<em title="Current section">Introduction</em>
<a href="../foldername/filename.html" onmouseup="this.blur();">Section name</a>
...etc </div></div>

<div id="sidenav"><div class="nav">
<em title="Current page">Intro page name</em>
<a href="filename2.html" onmouseup="this.blur();">Intro section page 2 name</a>
...etc </div></div>
css (concentrating on just the outline, the navigation background colour is a very light grey):
div.nav a {text-decoration: none; outline: 0; color: #321; background: transparent;  }
div.nav a:link, div.nav a:visited, div.nav a:active { outline:0}
div.nav a:focus { outline: 2px dotted #005; }
div.nav a:hover { color: #ffe; background: #005; outline:0 }

div.nav em { font-style: normal; color: #f40; background: #ffe; }
Thank you for any help.