I have a script that makes the element display = block using onmouseover

<script language="JavaScript">
function aaa() 
{
    document.getElementById('cat').style.display = "block";
}
</script>

<a href='#' onmouseover='aaa()'>hover on me</a>

<div  id='cat' style='display:none;'>this will show</div>

I wanted to return that element back to it's original display properties (none) when the mouse isn't over the

"<a href='#' onmouseover='aaa()'>hover on me</a>"

how can I do this?

I have a script that makes the element display = block using onmouseover

<script language="JavaScript">
function aaa() 
{
    document.getElementById('cat').style.display = "block";
}
</script>

<a href='#' onmouseover='aaa()'>hover on me</a>

<div  id='cat' style='display:none;'>this will show</div>

I wanted to return that element back to it's original display properties (none) when the mouse isn't over the

"<a href='#' onmouseover='aaa()'>hover on me</a>"

how can I do this?

• javascript
• html
• events
• dom
• onmouseover

• Next time, google it before ask. – totten Commented Sep 5, 2012 at 6:08

5 Answers 5

There's the onmouseout event

function bbb() 
{
    document.getElementById('cat').style.display = "none";
}

...

<a href='#' onmouseover='aaa()' onmouseout='bbb()'>hover on me</a>

Demo: http://jsfiddle.net/TRxRV/1/

HTML:

<a href='#' onmouseover='show();' onmouseout='hide();'>hover</a>
<div  id='cat' style='display:none;'>cat</div>​

JavaScript:

window.show = function () {
    document.getElementById('cat').style.display = "block";
}

window.hide = function () {
    document.getElementById('cat').style.display = "none";
}

i am considering the same code u provided as example. If u include the original display properties within the onMouseout() Function U will get back to the original properties when the mouse is not over.

<script language="JavaScript">
function aaa() 
{
    document.getElementById('cat').style.display = "block";
}
function bbb()
{
//include the code TO CHAGE THE PROPERTY HERE
document.getElementById('cat').style.display = "      ";
}
</script>

<a href='#' onmouseover='aaa();' onmouseout="bbb();">hover on me</a>

<div  id='cat' style='display:none;'>this will show</div>

This should help you...

                function aaa()
                {
                    document.getElementById('cat').style.display = "block";
                }
                function bbb()
                {
                    document.getElementById('cat').style.display = "none";
                }

        <a href='#' onmouseover='aaa()' onmouseout="bbb();">hover on me</a>
        <div id='cat' style='display: none;'>this will show</div>

You should use onMouseOut event for that, code will look like

<a href='#' onmouseover='show();' onmouseout='dontShow();'>hover</a>
<div  id='cat' style='display:none;'>this will show</div>​



function show() {
    document.getElementById('cat').style.display = "block";
}

function dontShow() {
    document.getElementById('cat').style.display = "none";
}