Question

I have been messing around with JS and CSS.
I have an anchor with general button styling.
In styling I have a border-bottom: 5px dotted blue;.
Then the JS is:

onmouseover = "this.style.borderBottom = '5px solid red';"

He is the JSFiddle Example: http://jsfiddle.net/MichaelMitchell/f4Ud4/
Hover over the Button

The border seems to overlap, could someone please explain?
This only is visible in FireFox because of the way Chrome handles dotted borders.

Answer 1

I can’t explain the buggy behaviour. Oviously firefox doesn’t clear the drawing area when another border is drawn.

But here’s a (dirty) solution

<a class = 'testButton' href = '#'
    onmouseover =
    "var button = this; button.style.borderBottom = '0px'; setTimeout( function() { button.style.borderBottom = '5px solid red'; }, 1 )">
    Button!
</a>