files/zh-cn/web/api/globaleventhandlers/onmouseover/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

---
title: GlobalEventHandlers.onmouseover
slug: Web/API/GlobalEventHandlers/onmouseover
translation_of: Web/API/GlobalEventHandlers/onmouseover
---
<div>{{ ApiRef("HTML DOM") }}</div>

<h3 id="概述">概述</h3>

<p><strong>onmouseover</strong>属性用来获取或设置当前元素的mouseover事件的事件处理函数.</p>

<h3 id="语法">语法</h3>

<pre class="eval">element.onmouseover = <em>event handling code</em>
</pre>

<h3 class="editable" id="例子"><span>例子</span></h3>

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

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

    function showMouseOver()
    {
        var notice = document.getElementById("notice");
        notice.innerHTML = '检测到鼠标移进';
    }

    function showMouseOut()
    {
        var notice = document.getElementById("notice");
        notice.innerHTML = '检测到鼠标移出';
    }


&lt;/script&gt;
&lt;style type="text/css"&gt;
    #foo {
    border: solid blue 2px;
    }
&lt;/style&gt;
&lt;/head&gt;
&lt;body onload="initElement()";&gt;
    &lt;span id="foo"&gt;移动鼠标,在该元素上移进移出&lt;/span&gt;
    &lt;div id="notice"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;  </pre>

<h3 id="备注">备注</h3>

<p>当鼠标移动到一个元素上时,会在这个元素上触发mouseover事件.</p>

<h3 id="规范">规范</h3>

<p>DOM Level 0 不属于任何规范.</p>

<p>{{ languages( { "pl": "pl/DOM/element.onmouseover", "fr": "fr/DOM/element.onmouseover" , "en": "en/DOM/element.onmouseover" } ) }}</p>