}
      else if( distance > circlePos.radius && el.data('inside') ) {
       // inside element / outside circle
       el.css( 'cursor', 'default' ).data( 'inside', false );
       _self.options.onMouseLeave( _self.$el );
      }
     }
    }); 
   },
   'mouseleave.circlemouse' : function( event ) {
    var el  = $(event.target);
    el.off('mousemove');
    if( el.data( 'inside' ) ) {
     el.data( 'inside', false );
     _self.options.onMouseLeave( _self.$el );
    }
   },
   'click.circlemouse'   : function( event ) {
    // allow the click only when inside the circle
    var el  = $(event.target);
    if( !el.data( 'inside' ) )
     return false;
    else
     _self.options.onClick( _self.$el );
   }
  });
 },
 destroy    : function() {
  this.$el.unbind('.circlemouse').removeData('inside').removeData('cursor');
 }
};

当我们的鼠标进入圆形区域对应的外部矩形边框后，我们将绑定mousemove方法到对应元素。然后我们计算鼠标离元素中心的距离。如果距离大于圆形半径，那么我们就知道不需要悬浮，否则，就触发自定义的‘mouseenter’事件。

同时如果出于圆内我们也可以允许触发鼠标的点击事件。

在我们的例子中我们可以针对任何元素执行我们的插件。在这个实例中，我们添加hover的class到‘mouseenter’并且在‘mouseleave’中删除掉。

$('#circle').circlemouse({
 onMouseEnter : function( el ) {
  el.addClass('ec-circle-hover');
 },
 onMouseLeave : function( el ) {
  el.removeClass('ec-circle-hover');
 },
 onClick   : function( el ) {
  alert('clicked');
 }
});

记住正常的伪类悬浮方式也需要定义到noscript.css中，这样如果javascript被禁用后，依然可以实现悬浮，虽然不如JS实现的完美。

via：tympanus

来源：