Question

I have the below code:

<button onmousemove="this.style.border='2px #555555 solid';" 
   onmouseout="this.style.border='';">Test</button>

On mousemove, it correctly changes the border as specified. On mouseout my intention is to change the border back to the original. This works in Gecko based browsers but not in IE. IE removes all the borders and the button becomes 2D.

How do I get back the original 3D look of the button?

Note: For debugging, I tried alert(this.style.border) the get the value of the original border. It shows it blank. So the original border value seems to be blank. But setting to blank does not bring the original look back. 🙁

Answer 1

Try setting and clearing a class for the element and assigning the border value to the class. Just like below:

.buttonHover
{
  border: 2px #555555 solid
}

<button onmousemove="this.className='buttonHover';" onmouseout="this.className='';">Test</button>

Note that this simple JS code will break your existing classes assigned to the element if there are any. If you are to use additional classes, please add a comment declaring the situation and I’ll change the code accordingly.