html 实例源码
实例源码：
源代码：
执行
执行中...
x
1
<!DOCTYPE html>2
<html>3
<head>4
<meta charset="utf-8">5
<title>时代Java与您共同学习(NowJava.com)</title>6
<style>7
div {8
width: 100px;9
height: 100px;10
border: 1px solid black;11
margin: 10px;12
float: left;13
padding: 30px;14
text-align: center;15
background-color: lightgray;16
}17
p {18
background-color: white;19
}20
</style>21
</head>22
<body>23
24
<h3>该实例演示了 onmousemove, onmouseenter 和 onmouseover 的不同。</h3>25
<p> onmousemove 事件在鼠标移动到 div 元素上时触发。</p>26
<p> mouseenter 事件中有在鼠标指针进入 div 元素时触发。 </p>27
<p> onmouseover 事件在鼠标指针进入 div 元素时触发,在子元素上也会触发(p 和 span)。</p>28
<div onmousemove="myMoveFunction()">29
<p>onmousemove: <br> <span id="demo">鼠标移动到我这!</span></p>30
</div>31
<div onmouseenter="myEnterFunction()">32
<p>onmouseenter: <br> <span id="demo2">鼠标移动到我这!</span></p>33
</div>34
<div onmouseover="myOverFunction()">35
<p>onmouseover: <br> <span id="demo3">鼠标移动到我这!</span></p>36
</div>37
<script>38
x = 0;39
y = 0;40
z = 0;41
function myMoveFunction() {42
document.getElementById("demo").innerHTML = z+=1;43
}44
/**代码未完, 请加载全部代码(NowJava.com).**/执行结果：
本文系作者在时代Java发表，未经许可，不得转载。如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java