Question

I have an unordered list with each list item background changing color when the mouse hovers over it. If the mouse does not move and the scroll wheel is scrolled down the cursor floats above different list items but the hover class through jQuery is not triggered. Why is this? How do I solve the problem?

Here is the code.

(function ($) {
  Drupal.behaviors.jMapping =  {
    attach: function(context, settings) {
      var jMap,
          pointToMoveTo,
          data,
          bounds,
          icon,
          $el;

      $('#map').height(200).jMapping({
        category_icon_options: {
          'default': {color: '#7CDF65'}
        }
      });

      jMap = $('#map').data('jMapping');
      bounds = jMap.getBounds();

      $.each(jMap.gmarkers, function(id, marker){  

        google.maps.event.addListener(marker, 'mouseover', function() {
          $('#nid-' + id).addClass('hover');
        });
        google.maps.event.addListener(marker, 'mouseout', function() {
          $('#nid-' + id).removeClass('hover');
        });
      });


      $("#map-side-bar li").mouseenter(function() {

        $el = $(this);
        data = $el.data('jmapping');

        if (!$el.hasClass("hover")) {
          $el.addClass("hover");

          jMap.gmarkers[data.id].styleIcon.set("color", "#017DC3"); 
          pointToMoveTo = $.jMapping.makeGLatLng(data.point);
          jMap.map.panTo(pointToMoveTo);
        }
      }).mouseleave(function() {
        $("#map-side-bar li").removeClass("hover");
        jMap.gmarkers[data.id].styleIcon.set("color", "#7CDF65");    
      });
    }
  };
})(jQuery);

Answer 1

Check out the mousewheel plugin by Brandon Aaron:

A jQuery plugin that adds
cross-browser mouse wheel support.

// using bind
$('#my_elem').bind('mousewheel', function(event, delta) {
    console.log(delta);
});

// using the event helper
$('#my_elem').mousewheel(function(event, delta) {
    console.log(delta);
});