hover event stops working after a mouse click

hover event stops working after a mouse click

I am encountering something so bizarre. The code defines a hover event on a div. When the mouse is clicked on the div, the hover event all of a sudden no longer works, and I can't figure out why. There is no code that removes the event handler. Can someone tell me if this is a bug? This problem occurs with any version of jQuery, version 1+ or 2+. Thanks.

<!DOCTYPE html>
<html>
<head>
    <title>Using jQuery Event Helper Functions</title>
    <link rel="stylesheet" href="../style.css"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#evtTarget").hover(highlight, highlight);

            $("#evtTarget").click(fnClick1);
           
            $("#evtTarget").dblclick(fnClick2);
           
            $(window).resize(fnResize);

            $("#evtTarget").one("click", function() {
                $(this).css({ background: "red",
                    cursor: "auto"
                });
            });
        });
       
        function highlight(evt) {
            $("#evtTarget").toggleClass("highlighted");
        }
        function fnClick1() {
            $("#evtTarget").html("Click");
        }
        function fnClick2() {
            $("#evtTarget").html("Double Click");
        }
        function fnResize() {
            $("#evtTarget").html("Browser window resized");
        }
    </script>
    <style type='text/css'>
    .highlighted {
        background-color:Red;
    }
    </style>
</head>
<body>
    <h1>Using Event Helpers</h1>
    <p>Some types of events are fairly common, and jQuery provides shorthand helper functions to make your code a little easier to write and read. Some examples:</p>
    <ul>
        <li><code>hover()</code>: use this instead of mouseover and mouseleave events</li>
        <li><code>click()</code>: listens for click events</li>
        <li><code>dblclick()</code>: listens for double-click events</li>
        <li><code>resize()</code>: fired on the window object when the browser window resizes</li>
    </ul>
    <div id="evtTarget" class="box">Mouse over this div to see the hover effect. Try clicking and double-clicking.</div>
</body>
</html>