javascript onmouseout works also on mouse over

Question

I'm trying to show/hide some of text in a button. the button is

<button id="SOS" onmouseover="show()" onmouseout="hide();">
    <p>S.O.S</p>
    <div id="sos_left"> <?=$text_to_show_hide?></div>
</button>

and the javascript code is

<script type="text/javascript">
function show()
    {
        sos_left=document.getElementById('sos_left');
         alert("mouseover");
         sos_left.style.color = "red";
         sos_left.style.fontSize = "28";

    }
function hide(){

       sos_left=document.getElementById('sos_left');
       alert("mouseout");
       sos_left.style.color = "blue";
       sos_left.style.fontSize = "0";
}
</script>

the thing is that the mouse out alerts even when I'm mouse overing.

NOTE: I can't use jquery because the site is vbulletin based and I use this code on one of the templates.

Answer 1

you dont hide anything..

use display:none to "remove" element, or visibility:hidden to hide element.

to "re-add" the element, use display: block or visibility:visible, if you used visibility attribute to hide.

try each both to see the difference.

another problem is,

you try to use sos_left as variable, but you didn't declare it as variable.

use var sos_left instead of.