在线演示

对于一个元素使用一个：hover伪类的方式是一个典型方法来实现一个页面元素的悬浮效果。但是问题是使用border-radius来实现的悬浮并不是非常理想的方式来对一个圆形元素实现悬浮事件处理，因为你无法针对真正的可视圆形区域处理悬浮事件，而只能针对对应的外边框矩形区域实现悬浮。特别是当你设置border-radius为50%的时候。

今天我们这里将分享一个解决方式来针对圆形来实现悬浮效果。我们将开发一个插件来处理真正的圆形区域对应的‘mouseenter’，‘mouseout’和‘click’事件而不是对应的矩形区域。

首先我们需要创建一个圆形。如下：

<a href="#">
 <h3>Hovered</h3>
</a>

以下为对应的样式表：

.ec-circle{
 width: 420px;
 height: 420px;
 -webkit-border-radius: 210px;
 -moz-border-radius: 210px;
 border-radius: 50%;
 text-align: center;
 overflow: hidden;
 font-family:'Kelly Slab', Georgia, serif;
 background: #dda994 url(../images/1.jpg) no-repeat center center;
 box-shadow:
  inset 0 0 1px 230px rgba(0,0,0,0.6),
  inset 0 0 0 7px #d5ad94;
 transition: box-shadow 400ms ease-in-out;
 display: block;
 outline: none;
}

接下来我们为悬浮效果定义一个class，但不是使用一个动态的伪class ：hover。主要的想法是当我们进入圆形区域的时候使用jQuery执行这个class：

.ec-circle-hover{
    box-shadow:
  inset 0 0 0 0 rgba(0,0,0,0.6),
  inset 0 0 0 20px #c18167,
  0 0 10px rgba(0,0,0,0.3);
}

只有当javascript被禁用的时候，我们才使用伪类方式。如下：

.ec-circle:hover{
    box-shadow:
  inset 0 0 0 0 rgba(0,0,0,0.6),
  inset 0 0 0 20px #c18167,
  0 0 10px rgba(0,0,0,0.3);
}

JavaScript

$.CircleEventManager    = function( options, element ) {
 this.$el   = $( element );
 this._init( options );
};

$.CircleEventManager.defaults  = {
 onMouseEnter : function() { return false },
 onMouseLeave : function() { return false },
 onClick   : function() { return false }
};

$.CircleEventManager.prototype  = {
 _init     : function( options ) {
  this.options   = $.extend( true, {}, $.CircleEventManager.defaults, options );
  // set the default cursor on the element
  this.$el.css( 'cursor', 'default' );
  this._initEvents();
 },
 _initEvents   : function() {
  var _self = this;
  this.$el.on({
   'mouseenter.circlemouse' : function( event ) {
    var el = $(event.target),
        circleWidth = el.outerWidth( true ),
        circleHeight = el.outerHeight( true ),
        circleLeft = el.offset().left,
        circleTop  = el.offset().top,
        circlePos  = {
         x  : circleLeft + circleWidth / 2,
         y  : circleTop + circleHeight / 2,
         radius: circleWidth / 2
        };
    // save cursor type
    var cursor = 'default';
    if( _self.$el.css('cursor') === 'pointer' || _self.$el.is('a') )
     cursor = 'pointer';
    el.data( 'cursor', cursor );
    el.on( 'mousemove.circlemouse', function( event ) {
     var distance = Math.sqrt( Math.pow( event.pageX - circlePos.x, 2 ) + Math.pow( event.pageY - circlePos.y, 2 ) );
     if( !Modernizr.borderradius ) {

      // inside element / circle
      el.css( 'cursor', el.data('cursor') ).data( 'inside', true );
      _self.options.onMouseEnter( _self.$el );

     }
     else {
      if( distance <= circlePos.radius && !el.data('inside') ) {
       // inside element / circle
       el.css( 'cursor', el.data('cursor') ).data( 'inside', true );
       _self.options.onMouseEnter( _self.$el );