JavaScript onmouseover Event

February 8, 2021 10:45 am IST

You are Here:

JavaScript onmouseover Event

The onmouseover event occurs when the mouse pointer is moved onto an element or one of its child elements.

Note: Unlike onmouseenter event, the onmouseover event will bubble, i.e., The element with onmouseover event will be affected when the mouse pointer is moved onto its child element.

onmouseover Event as Attribute

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <p onmouseover="myFunction()">Place the cursor over me</p> <script> function myFunction(){ document.write("You placed"); } </script> </body> </html>

Run

Syntax

As Attribute

As Property

object.onmouseover = function(){ // code };

Using Event Listener

object.addEventListener("mouseover" , myScript);

onmouseover Event as Property

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <p>Place the cursor anywhere over this document</p> <script> function myFunction(){ document.write("You placed"); } document.onmouseover = myFunction; </script> </body> </html>

Run

Using addEventListener() Method

Note: The addEventListener() method is not supported in Internet Explorer 8 and below.

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <p>Place the cursor over me</p> <script> var x = document.getElementsByTagName("p")[0]; function myFunction(){ document.write("You placed"); } x.addEventListener("mouseover", myFunction); </script> </body> </html>

Run