//INPUT: Detecting mouseovers

<New code>

//INPUT JS: document.querySelector( "#exampleId" ).onmouseover = someFunction;
— triggers someFunction when the mouse goes over exampleId
//INPUT JS: document.querySelector( "#exampleId" ).onmouseout = someFunction;
— triggers someFunction when the mouse leaves exampleId

//INPUT JS: document.querySelector( "#exampleId" ).onmouseover = "";
— removes the mouseover event from exampleId
//INPUT JS: document.querySelector( "#exampleId" ).onmouseout = "";
— removes the mouseout event from exampleId

The scamper of tiny mice...

We have been writing code that responds to many different events:

I am sure that you have come across code that changes things whenever you mouse over top of something. This is how you do that in HTML:

document.querySelector( "#exampleId" ).onmouseover = someFunction;
triggers someFunction whenever the mouse enters an element
document.querySelector( "#exampleId" ).onmouseout = someFunction;
triggers someFunction whenever the mouse leaves an element

Learn more

Example code

I'm more than just a rock!

When your mouse goes over the rock image (with id="imageId"), it will trigger the onmouseover event and replace the rock with a heart.

When your mouse leaves the image, it will trigger the onmouseout event and replace the heart back with the rock.

Here is the code:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="Learn how to detect mouseovers with Javascript">
        <!--
            Change log:
                12. Oct 2015    - created!                                      - Drapak
                25. March 2017  - reworked for better style                     - Drapak
                21. Oct 2018    - reworked again for style and clarity          - Drapak
        -->
        <style>
            #imageId{
                height: 50px;
            }
        </style>
    </head>

    <body>
        <p>
            I'm more that just a rock!
            <img 
                id="imageId"
                alt="Move over me to change me!"
                src="https://www.kasandbox.org/programming-images/cute/Rock.png">
        </p>
        <script>
            //OUTPUT: replace #imageId with a heart image
            var showHeart = function () {
                console.log( 'in showHeart...' );
                
                document.querySelector( '#imageId' ).src    
                    = "https://www.kasandbox.org/programming-images/space/healthheart.png";
            }

            //OUTPUT: replace #imageId with a rock image
            var showRock = function () {
                console.log( 'in showRock...' );
                
                document.querySelector( '#imageId' ).src        
                    = "https://www.kasandbox.org/programming-images/cute/Rock.png";
            }
            
            //INPUT: attach showRock and showHeart to #imageId's mouseover and mouseout events
            document.querySelector( '#imageId' ).onmouseover    = showHeart;
            document.querySelector( '#imageId' ).onmouseout     = showRock;
        </script>
    </body>
</html>

Removing mouseover events

You can remove an onmouseover or onmouseout event by using javascript to replace the function name with an empty string. For example: 

document.querySelector( "#exampleId" ).onmouseover = "";	//PROCESS: removes the mouseover event from #exampleId
document.querySelector( "#exampleId" ).onmouseout = "";	//PROCESS: removes the mouseout event from #exampleId

Live example: Detecting mouseovers