HTML Event attribute: onmouseleave
[this page | pdf | back links]
The HTML onmouseleave 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 onmouseenter
event.
It is like the onmouseout
event (or the onmousemove
event), except that the onmouseleave
event only fires when the mouse first leaves the element itself, whereas the onmouseout
event also fires in response to the mouse moving out of the element into 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