html tutorial - onmouseover Attribute in HTML - html5 - html code - html form



Onmouseover attribute in html

Learn html - html tutorial - Onmouseover attribute in html - html examples - html programs

  • The onmouseover attribute triggers when the mouse pointer move over the element.

Syntax for onmouseover attribute in HTML:

<element onmouseover="script">

Applies To:

Element Attribute
All HTML elements onmouseover

Attribute Values:

Value Description
script The script can run on onmouseover

Sample Coding for onmouseover Attribute in HTML:

Tryit<!DOCTYPE html>
<html>
        <head>
        <title>Wikitechy onmouseover attribute</title>
        </head>
 <body>
        <p onmouseover="mouseOver(this)" onmouseout="mouseOut(this)">
        Move mouse pointer to check onmouseover Event.<br>Learn to Code in Wikitechy.
        </p>
        <script>
        function mouseOver (obj)
          {
             obj.style.color = "red";
          }
                  function mouseOut (obj)
          {
             obj.style.color = "blue";
          }

       </script>
</body>
</html>

Code Explanation for onmouseover Attribute in HTML:

onmouseover Attribute Code Explanation

  1. onmouseoverattribute used to trigger an event when the mouse pointer move over to the specified element.
  2. onmouseout attribute used to trigger an event when the mouse pointer left out from the specified element.
  3. mouseover JavaScript function used to change the text color to red.
  4. mouseOut JavaScript function used to change the text color to blue.

Output for onmouseover Attribute in HTML:

onmouseover Attribute Tag Output

  1. The output shows "Move mouse pointer to check onmouseover Event. Learn to Code in Wikitechy." in default (Black) color.
  2. onmouseover Attribute Tag Output

  3. Once we move the mouse pointer to over the text the mouseOver() function called and the text color will be changed to red.
  4. onmouseover Attribute Tag Output

  5. If we move the mouse pointer left out from the text mouseOut function called and the text color will be changed to blue.

Browser Support for onmouseover Attribute in HTML:

Yes Yes Yes Yes Yes

Related Searches to onmouseover attribute in html