Revision 480785 of GlobalEventHandlers.onmouseover

Revision slug: Web/API/GlobalEventHandlers.onmouseover
Revision title: GlobalEventHandlers.onmouseover
Revision id: 480785
Created: Oct 15, 2013, 8:21:45 AM
Creator: Thibaut
Is current revision? No
Comment

Tags:

Revision Content

Summary

The onmouseover property returns the onMouseOver event handler code on the current element.

Syntax

element.onmouseover = event handling code

Example

<!doctype html>  
<html>  
<head>  
<title>onmouseover/onmouseout event example</title>  
<script type="text/javascript">  
    function initElement()  
    {  
        var p = document.getElementById("foo");  

        p.onmouseover = showMouseOver;
        p.onmouseout = showMouseOut;
    };  

    function showMouseOver()  
    {  
        var notice = document.getElementById("notice");
        notice.innerHTML = 'mouse over detected';
    }
    
    function showMouseOut()
    {
        var notice = document.getElementById("notice");
        notice.innerHTML = 'mouse out detected';
    }


</script>  
<style type="text/css">  
    #foo {  
    border: solid blue 2px;  
    }  
</style>  
</head>  
<body onload="initElement();">  
    <span id="foo">My Event Element</span>
    <p>move your mouse over and out the above element.</p>  
    <div id="notice"></div>
</body>  
</html>

Notes

The mouseover event is raised when the user moves the mouse over a particular element.

Specification

Not part of specification.

{{ languages( { "pl": "pl/DOM/element.onmouseover", "fr": "fr/DOM/element.onmouseover" , "zh-cn": "zh-cn/DOM/element.onmouseover" } ) }}

Revision Source

<p>{{ DomRef() }}</p>
<h3 id="Summary">Summary</h3>
<p>The <strong>onmouseover</strong> property returns the onMouseOver event handler code on the current element.</p>
<h3 id="Syntax">Syntax</h3>
<pre class="eval">
element.onmouseover = <em>event handling code</em>
</pre>
<h3 class="editable" id="Example"><span>Example</span></h3>
<pre class="brush: html">
&lt;!doctype html&gt; &nbsp;
&lt;html&gt; &nbsp;
&lt;head&gt; &nbsp;
&lt;title&gt;onmouseover/onmouseout event example&lt;/title&gt; &nbsp;
&lt;script type="text/javascript"&gt; &nbsp;
&nbsp;&nbsp;&nbsp; function initElement() &nbsp;
&nbsp;&nbsp;&nbsp; { &nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var p = document.getElementById("foo"); &nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; p.onmouseover = showMouseOver;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; p.onmouseout = showMouseOut;
&nbsp;&nbsp;&nbsp; }; &nbsp;

&nbsp;&nbsp;&nbsp; function showMouseOver() &nbsp;
&nbsp;&nbsp;&nbsp; { &nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var notice = document.getElementById("notice");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; notice.innerHTML = 'mouse over detected';
&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp;&nbsp; function showMouseOut()
&nbsp;&nbsp;&nbsp; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var notice = document.getElementById("notice");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; notice.innerHTML = 'mouse out detected';
&nbsp;&nbsp;&nbsp; }


&lt;/script&gt; &nbsp;
&lt;style type="text/css"&gt; &nbsp;
&nbsp;&nbsp;&nbsp; #foo { &nbsp;
&nbsp;&nbsp;&nbsp; border: solid blue 2px; &nbsp;
&nbsp;&nbsp;&nbsp; } &nbsp;
&lt;/style&gt; &nbsp;
&lt;/head&gt; &nbsp;
&lt;body onload="initElement();"&gt; &nbsp;
&nbsp;&nbsp;&nbsp; &lt;span id="foo"&gt;My Event Element&lt;/span&gt;
&nbsp;&nbsp;&nbsp; &lt;p&gt;move your mouse over and out the above element.&lt;/p&gt; &nbsp;
&nbsp;&nbsp;&nbsp; &lt;div id="notice"&gt;&lt;/div&gt;
&lt;/body&gt; &nbsp;
&lt;/html&gt;&nbsp; 
</pre>
<h3 id="Notes">Notes</h3>
<p>The mouseover event is raised when the user moves the mouse over a particular element.</p>
<h3 id="Specification">Specification</h3>
<p>Not part of specification.</p>
<p>{{ languages( { "pl": "pl/DOM/element.onmouseover", "fr": "fr/DOM/element.onmouseover" , "zh-cn": "zh-cn/DOM/element.onmouseover" } ) }}</p>

Revert to this revision