jQuery event “hover” issue

jQuery.event.hover page

jQuery.event.hover provides delegate-able hover events. A hover happens when the mouse stops moving over an element for a period of time. You can listen to the following events:

  • [jQuery.event.hover.hoverinit hoverinit] – called on mouseenter, use this event to customize jQuery.Hover.prototype.delay and jQuery.Hover.prototype.distance
  • [jQuery.event.hover.hoverenter hoverenter] – an element is being hovered
  • [jQuery.event.hover.hovermove hovermove] – the mouse moves on an element that has been hovered
  • [jQuery.event.hover.hoverleave hoverleave] – the mouse leaves the element that has been hovered

Quick Example
The following examples listens to hoverenter to add a class to style the element, and removes the class on hoverleave.

$('#menu').on({ "hoverenter" : function() {
  $(this).addClass("hovering"); }, "hoverleave" : function() {
  $(this).removeClass("hovering");
 }
});

Configuring Distance and Delay

An element is hovered when the mouse moves less than a certain distance in specific time over the element.

You can configure that distance and time by adjusting the distance (in pixels) and delay (in ms) values. It can either be set globally by adjusting the static properties jQuery.Hover.static.delay and jQuery.Hover.static.distance: Or you can adjust jQuery.Hover.prototype.delay and jQuery.Hover.prototype.distance for an individual hover during hoverinit:

$(".option").on("hoverinit", function(ev, hover){
  //set the distance to 10px
  hover.distance(10)
  //set the delay to 200ms
  hover.delay(10)
});
  steal('jquery/event/hover', function(){
    // adds a hover class var add = function(ev){ 
    $(this).addClass("hoverstate");
  };
 
  // removes a hover class
  var remove = function(ev) {
    $(this).removeClass("hoverstate");
  };
 
  // delegate on hover
  $('.hover').live('hoverenter',add);
  $('.hover').live('hoverleave', remove);
 
  $('.hovers').bind('hoverinit',function(ev, hovered) {
    hovered.delay(1000);
  });
 
  $('.hovers').bind('hoverenter',add);
  $('.hovers').bind('hoverleave', remove);
 
  $('.hoverleave').bind('hoverinit',function(ev, hovered) {
    hovered.leave(500); }).bind('hoverenter',add).bind('hoverleave', remove);
  });
// NOT OK
$('a', '#hoge').hover(function(){
  $(this).after('<span>Test hover</span>');
  },function(){
  $(this).next().remove();
});
 
/* NOT OK */
$('a', '#hoge1').live('hover', function(){
  $(this).after('<span>Test hover</span>');
  },function(){
  $(this).next().remove();
});
 
/* OK */
$('a', '#hoge2').live('hover', function(e){
  if(e.type == 'mouseover'){
    $(this).after('<span>Test hover</span>');
  }else{
    $(this).next().remove();
}
});
 
/* OK */
$('a', '#hoge3').live('mouseover', function(){
  $(this).after('<span>Test hover</span>');
  }).live('mouseout', function(){
    $(this).next().remove();
});

 
Source: http://donejs.com/docs.html#!jQuery.event.hover

You can leave a response, or trackback from your own site.

4 Responses to “jQuery event “hover” issue”

  1. spirits says:

    You have remarked very interesting details! ps nice web site.

  2. Gro?handel Hochzeitskleid says:

    high quality wedding dress, Interested in the contents of your content is very lovable’s a I very much like you write and look forward to your better works, I would recommend to my friends post.

  3. Delores Mendyk says:

    Hello…

    I see something truly fascinating about your internet web site so I saved to bookmarks ….

Leave a Reply

Designed for Ares Galaxy in Collaboration with Hostgator coupons and Popular Wordpress Themes and unlock iphone 5