javascript - How to detect if not onmouseover?

Question

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?

Next time, google it before ask. – totten Sep 05 '12 at 06:08 — totten, Sep 05 '12 at 06:08

score 7 · Accepted Answer · answered Sep 05 '12 at 06:01

7

There's the onmouseout event

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

...

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

answered Sep 05 '12 at 06:01

Jcl

27,696
5
61
92

score 3 · Answer 2 · answered Sep 05 '12 at 06:03

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";
}

Nikhil D · Answer 3 · 2012-09-05T06:12:24.273

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>

score 3 · Answer 4 · answered Sep 05 '12 at 06:06

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>

score 2 · Answer 5 · answered Sep 05 '12 at 06:02

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";
}

javascript - How to detect if not onmouseover?

5 Answers5