/

HTML / CSS / JavaScript Tutorial

HTML Event attribute: onmouseover

[this page | pdf | back links]

The HTML onmouseover attribute specifies the event that is triggered when the mouse pointer moves over an element. It applies to all visible elements.

 

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


Desktop view | Switch to Mobile