3 examples that explain JavaScript onmouseover event

The onmouseover event

In web pages, the HTML onmouseover event occurs as the mouse pointer is brought over an element like a div, link, paragraph etc. You can attach JavaScript to onmouseover event for some useful purpose e.g. as the mouse is over an image or a paragraph or div element you can change colors or some other effects. Similarly, you can perform actions to other HTML elements, as onmouseover event occurs.

Following are a few examples of using onmouseover javascript event.

HTML div example with onmouseover event

Following is an HTML div example as onmouseover occurs. We have created a div element with some text inside it. As you bring the mouse over that div element an alert will be shown. See example by clicking the link below:

Experience this example online


An onmouseover example in an image

You can also execute JavaScript on image elements as the mouse is over an image. Following is an example of JavaScirpt onmouseover in an image element. As you bring the mouse over the image, the onmouseover event occurs where we attached a javascript function. The function will show an alert.

Experience this example online


Following is an example of onmouseover with a link element. As you bring the mouse over the link, a function of javascript will be called that will add text in a paragraph.

Experience this example online


As you can see, as onmouseover event occurred, the javascript function added text in the paragraph.

Also see Javascript onclick | javascript onchange

Was this article helpful?

Related Articles

Leave A Comment?