Jquery hover/mouseenter functions not working

Question

Title. I have looked up multiple examples but none have worked, such as-

$(".thumb-link").on({
  mouseenter: function() {
    alert("yay");
  },
  mouseleave: function() {
    alert("boo");
  }
});

$(document).on('mouse-enter', '.thumb-link', function(e) {
  alert("yay");
});

$(document).on('hover', '.thumb-link', function(e) {
  alert("yay");
});

I've used hover functions before and I feel like I'm going crazy. Why don't these work?

EDIT- Is the problem because the links are being generated from a database? Even if so, there must be some way for jquery to apply a hover function. The same elements have working click functions.

Answer 1

There's a typo in

$(document).on('mouse-enter','.thumb-link',function(e){
    alert("yay");
});

mouse-enter should be mouseenter

If you somehow have to use hover, you can be doing like this:

$('.thumb-link').hover(
  function(e) {
    alert("yay");
  },
  function(e) {
    alert("boo");
  }
)

.thumb-link {
  height: 100px;
  outline: 1px red solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumb-link"></div>