
- HTML Tutorial
- HTML - Home
- HTML - Overview
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Comments
- HTML - Images
- HTML - Tables
- HTML - Lists
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Frames
- HTML - Iframes
- HTML - Blocks
- HTML - Backgrounds
- HTML - Colors
- HTML - Fonts
- HTML - Forms
- HTML - Embed Multimedia
- HTML - Marquees
- HTML - Header
- HTML - Style Sheet
- HTML - Javascript
- HTML - Layouts
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- HTML - Fonts Ref
- HTML - Events Ref
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
HTML onmouseout Event Attribute
The HTML onmouseout event attribute is triggered when the mouse pointer moves out of an HTML element in an HTML document.
Syntax
Following is the syntax −
<tagname onmouseout=”script”></tagname>
Let us see an example of HTML onmouseout event Attribute−
Example
<!DOCTYPE html> <html> <head> <style> body { color: #000; height: 100vh; background-color: #FBAB7E; background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%); text-align: center; } .circle { background: #db133a; height: 150px; width: 150px; border-radius: 50%; margin: 10px auto; } p { margin: 30px auto; } </style> </head> <body> <h1>HTML onmousemove Event Attribute Demo</h1> <div class="circle" onmousemove="mouseMoveFn()" onmouseout="mouseOutFn()"></div> <p>Try to move the cursor over the red circle</p> <script> function mouseMoveFn() { document.querySelector('.circle').style.background = '#2274A5'; } function mouseOutFn() { document.querySelector('.circle').style.background = '#0B6E4F'; } </script> </body> </html>
Output
Now try to move the mouse cursor over the red circle to observe how onmouseout event attribute works−
- Related Articles
- HTML onblur Event Attribute
- HTML onclick Event Attribute
- HTML onchange Event Attribute
- HTML oncopy Event Attribute
- HTML oncut Event Attribute
- HTML oncontextmenu Event Attribute
- HTML ondrag Event Attribute
- HTML onfocus Event Attribute
- HTML oninput Event Attribute
- HTML oninvalid Event Attribute
- HTML onpaste Event Attribute
- HTML onresize Event Attribute
- HTML onreset Event Attribute
- HTML onsubmit Event Attribute
- HTML onscroll Event Attribute

Advertisements