html - javascript - How to detect if not onmouseover? - Stack Overflow

admin管理员组

文章数量:1221774

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

Share Improve this question Follow edited Sep 5, 2012 at 6:31 Danil Speransky 30.5k66 gold badges6969 silver badges7878 bronze badges asked Sep 5, 2012 at 5:59 Sam SanSam San 6,90399 gold badges3535 silver badges5151 bronze badges 1

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

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 7

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

本文标签： htmljavascriptHow to detect if not onmouseoverStack Overflow