Jquery onmouseover not working

Question

When I move my mouse over any one of the DIVs with a class of .notif, I want the background colour and border-left styles to be removed completely but it's not working within my code - I don't see either the alert or the console.log message.
I will have several divs with the same class - only the one that is hovered over should have the background removed.

I don't want to toggle or hover, as I'm not looking to change the colour back when the user moves their mouse away again. The background colour should be left as white.

It's works in JS fiddle using .addClass() or .attr() to set the background back to white but the script doesn't work elsewhere. I've got other JS/Jquery scripts in place that work so it's not that I've forgotten to include the URLs.

$(document).ready(function() {
  $(".notif").mouseover(function() {
    //console.log('mouseover detected!!');
    //alert('Mouse!');
    $(this).addClass("notif_read");
    //$(this).attr("style","background-color:white");
  });
});

.notif {
  background: aliceblue;
  border-left: darkblue;
  border-left-style: solid;
}
.notif_read {
  background: white;
  border-left: none;
  border-left-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="notifications container" style="width: 400px; max-height: 300px; overflow: auto;">
  <h6 style="margin-left:40px;"><div class="notification-heading">Unread Notifications</div></h6>
  <hr class="notification-divider">
  <div class="notif row">
    <a href="?function=show&amp;id=47930">
      <div class="col-md-2 text-left">
        <img src="https://wb-dev.workbooks.com/resources/3AjMwETM/wb_icon_small.png" height="70px" width="70px">
        <input class="case_ref" type="hidden" value="CASE-32109">#
      </div>
      <div class="col-md-2"></div>
      <div class="col-md-8 text-center text-muted">Workbooks Support updated CASE-32109</div>
    </a>
  </div>
  <div class="notif row">
    <a href="?function=show&amp;id=47930">
      <div class="col-md-2 text-left">
        <img src="https://wb-dev.workbooks.com/resources/3AjMwETM/wb_icon_small.png" height="70px" width="70px">
        <input class="case_ref" type="hidden" value="CASE-32109">#
      </div>
      <div class="col-md-2"></div>
      <div class="col-md-8 text-center text-muted">Workbooks Support updated CASE-32109</div>
    </a>
  </div>
  </hr>
</div>

jsfiddle: http://jsfiddle.net/ha4pwd4o/3/

Answer 1

I've finally resolved this query! Although the example above works as intended. Within my environment, the code sides within a dropdown menu. It is dynamically created by AJAX (every 10 minutes, I check a database for new notifications, generate HTML on the fly append it to the existing list) - I think maybe the DOM doesn't know about the new DIVs, therefore cannot change them onmouseover.

Final code which I hope helps someone:

    $("#notification_menu").on("mouseover", ".notif", function() {
        console.log('mouseover detected!!');
        $(this).addClass('notif_read');
    });