<!DOCTYPE html>
<html>
<head>
<title>
DOM onmouseover event
</title>
</head>
<body>
<center>
<h1 id="hID">
GeeksforGeeks
</h1>
<h2>
HTML DOM onmouseover event
</h2>
<script>
document.getElementById(
"hID").addEventListener(
"mouseover", over);
document.getElementById(
"hID").addEventListener(
"mouseout", out);
function over() {
document.getElementById(
"hID").style.color = "green";
document.getElementById(
"hID").style.position= "absolute";
document.getElementById(
"hID").style.left = 0;
}
function out() {
document.getElementById(
"hID").style.color = "black";
document.getElementById(
"hID").style.position= "relative";
}
</script>
</center>
</body>
</html>
<html>
<head>
<script>
function moveleft(){
var h=document.getElementById("myH2");
h.style.position="absolute";
h.style.left=0;
}
function moveback(){
var h=document.getElementById("myH2");
h.style.position='"relative";
}
</script>
</head>
<body>
<h2 id="myH2"
onmouseover="moveleft()"
onmouseout="moveback()">移動標題文字</h2>
</body>
</html>