JSFiddle - React, Tailwind, and code Playground

by Philip Kahn

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<img src='http://filehost.revealedsingularity.net/google_signin_button.svg' alt='Sign in with Google' style='width:320px;height:108px;' id='signin_button' />

JavaScript

function bindMouse() {
    $('#signin_button').on({
        mouseenter: function () {
            $('#signin_button').attr("src", "http://filehost.revealedsingularity.net/google_signin_hover.svg");
            console.log('MouseOver');
        },
        mouseleave: function () {
            $('#signin_button').attr("src", "http://filehost.revealedsingularity.net/google_signin_button.svg");
            console.log('MouseOut');
        },
        mouseup: function () {
            $('#signin_button').attr("src", "http://filehost.revealedsingularity.net/google_signin_hover.svg");
            console.log('MouseUp');
        },
        mousedown: function () {
            $('#signin_button').attr("src", "http://filehost.revealedsingularity.net/google_signin_click.svg");
            console.log('MouseDown');
        }
    });
}
bindMouse();