Home/ Questions/Q 7758601
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T13:24:08+00:00

I would like to have both a hover and remove hover event. The nodes

  • 0

I would like to have both a hover and remove hover event. The nodes which have this event are added dynamically, so I wish to use on(). When adding a hover event, it works great (the #second list below). For some reason when I add the off hover event, not even the add hover event will work (#first list below).

Please provide any clues. A live example is located at http://jsfiddle.net/NV7hR/

Thanks

$(document).ready(function() {
  $("#first").on("hover", "a", function(event) {
    $(this).parent().css("background-color", "yellow");
  }, function(event) {
    $(this).parent().css("background-color", "");
  });
  $("#second").on("hover", "a", function(event) {
    $(this).parent().css("background-color", "yellow");
  });
});

<body>
<ul id="first">
    <li><a href="#"/>Link</a></li>
    <li><a href="#"/>Link</a></li>
    <li><a href="#"/>Link</a></li>
</ul>
<ul id="second">
    <li><a href="#"/>Link</a></li>
    <li><a href="#"/>Link</a></li>
    <li><a href="#"/>Link</a></li>
</ul>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Split the hover into mouseenter and mouseleave, which is what hover is shorthand for anyways.

    $("#first").on("mouseenter", "a", function(event) {
   $(this).parent().css("background-color", "yellow");
}).on("mouseleave", "a", function(event) {
   $(this).parent().css("background-color", "");
});
    • 0