What would be jQuery equivalent of this sf hover suckerfish code?

Question

What would be jQuery equivalent of this sf hover suckerfish code?

<script>
sfHover = function() {
   var sfEls = document.getElementById("navbar").getElementsByTagName("li");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" hover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" hover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

Answer 1

$(function(){         // equivalent to [.ready()][1] syntax (i.e. fire on load)
  $('#navbar li').hover(  // attach hover event to any li descendant of element with id=navbar
    function(){$(this).addClass('hover')},    // $(this) signifies the li element that was hovered over, so we add the 'hover' class to it
    function(){$(this).removeClass('hover')}  // then remove it onmouseout
  );
});

No conflict version:

$.noConflict();
jQuery(document).ready(function($) {
  $('#navbar li').hover(
      function(){$(this).addClass('hover')},
      function(){$(this).removeClass('hover')}
    );
});
// Code that uses other library's $ can follow here.

Answer 2

Along with @john Rashh's answer, you could also handle the mouseover and mouseout functions separately...

$(document).ready(function() {

   $("#navbar li").mouseover(function() {
      $(this).addClass("hover");
   });

   $("#navbar li").mouseout(function() {
      $(this).removeClass("hover");
   });

});