HTML Event attribute: onmouseenter
[this page | pdf | back links]
The HTML onmouseenter attribute specifies the event
that is triggered when the mouse pointer moves onto an element. It applies to all
visible elements. It is often used in conjunction with the onmouseleave
event.
It is like the onmouseover
event (or the onmousemove
event), except that the onmouseenter
event only fires when the mouse first enters the element itself, whereas the onmouseover
event also fires in response to the mouse moving into the element from a child
element that is located within the original element.
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseover, onmouseup, onmousewheel, onwheel:<br>
try moving mouse across, or using scroll and clicking on and off this
<span style="background-color: yellow;"
onmousedown="myOnmousedown()"
onmouseenter="myOnmouseenter()"
onmouseleave="myOnmouseleave()"
onmousemove="myOnmousemove()"
onmouseover="myOnmouseover()"
onmouseup="myOnmouseup()"
onmousewheel="myOnmousewheel()"
onwheel="myOnwheel()"
>element</span>
<br><br>
Mouse down: <b id="mouse1"></b><br>
Mouse enter: <b id="mouse2"></b><br>
Mouse leave: <b id="mouse3"></b><br>
Mouse move: <b id="mouse4"></b><br>
Mouse over: <b id="mouse5"></b><br>
Mouse up: <b id="mouse6"></b><br>
Mouse wheel: <b id="mouse7"></b><br>
Wheel: <b id="mouse8"></b><br>
<script>
function myOnmousedown() {document.getElementById("mouse1").innerHTML = "Yes";}
function myOnmouseenter() {document.getElementById("mouse2").innerHTML = "Yes";}
function myOnmouseleave() {document.getElementById("mouse3").innerHTML = "Yes";}
function myOnmousemove() {document.getElementById("mouse4").innerHTML = "Yes";}
function myOnmouseover() {document.getElementById("mouse5").innerHTML = "Yes";}
function myOnmouseup() {document.getElementById("mouse6").innerHTML = "Yes";}
function myOnmousewheel() {document.getElementById("mouse7").innerHTML = "Yes";}
function myOnwheel() {document.getElementById("mouse8").innerHTML = "Yes";}
</script>
</body>
</html>
|
NAVIGATION LINKS
Contents | Prev | Next | HTML Attributes