<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
div{
height:50px;
border:1px solid #000000;
}
#main{
color:blue;
border:1px solid red;
}
p{
margin-top:0px;
}
</style>
</head>
<body>
<div>
<p>This is paragraph <span id="main" onmouseenter="myFunction(event)">"Touch and go"</span></p>
</div>
<h2>Related nodeName : <span id="point"></span></h2>
<p><strong>Note</strong> : The following are the return value</p>
<p>Hover 'Touch and go' from left to right: P</p>
<p>Hover 'Touch and go' from top to bottom: HTML</p>
<p>Hover 'Touch and go' from bottom to top: DIV</p>
<script>
function myFunction(e){
var mynodeName= e.relatedTarget.nodeName ;
document.getElementById("point").innerHTML = mynodeName;
}
</script> </body>
</html>