javascript set border style 0px

I'm new to j开发者_开发知识库avascript so please forgive my naive question!

I just want to set border style to 1px visible when mouse enters an image, and back to 0 when mouse leaves. Here is what I've done so far:

function cardMouseEnter(ctrl) {
    document.getElementById(ctrl).style.border = "solid 1px";
}

function cardMouseLeave(ctrl) {
    document.getElementById(ctrl).style.border = "solid 0px";
}

With IE it works fine while with Firefox and Safari, once the border is set to 1px, it won't go back to 0px.

I'm sure there is a catch... I KNOW it can be done in the html tag of each object, so please avoid telling me that...

Did you try none ?

function cardMouseLeave(ctrl) {
    document.getElementById(ctrl).style.border = "none";
}

If you want to use 0 I think the correct syntax is simply 0 without the "solid" or "px".

If you are only toggling border width then address only border width

document.getElementById(ctrl).style.borderWidth = '1px';

There is no problem in the code you show us. See http://jsfiddle.net/4x2qU/ - border shows up when the mouse is over the word "test" and disappears again once the mouse is moved away. It is working even though I left the mistakes from your example: border color isn't being set (defaults to "black") and it is toggling all border parameters instead of changing border width only.

The issue was onmouseleave DOESN'T EXISTS outside IE!

I replaced it with onmouseout and now its working just fine with all 3 browsers...