My jQuery looks like this:

```
$('h1').mouseenter(function(event) {
    console.log("in");
    $('.cursor:nth-child(2)').animate({height: "60px", width: "60px"}, 300)
});
$('h1').mouseleave(function(event) {
    console.log("out");
    $('.cursor:nth-child(2)').animate({height: "30px", width: "30px"}, 300)
});

```

The relevant CSS is here:

```
.cursor:nth-child(2) {
  border: 1px solid white;
  height: 30px;
  width: 30px;
}

```

And the relevant HTML is an H1 tag. What I expect to happen is straightforward - the .cursor div to expand while the cursor is hovering over an H1 element, and shrink back down to size when it isn't. 

However, when I hover over the element the console continuously logs (in) and (out), hundreds of times. The same thing happens with .hover().

Here's a link to a Codepen: <https://codepen.io/DrSuave/pen/BqrxER>

Any help appreciated.