Web designer Mary Lou shares another helpful jQuery tutorial. Here, she demonstrates how to solve circle hovering problem by creating a plugin that will take care of the ‘mouseenter’, ‘mouseleave’ and ‘click’ events.

Here’s how it works. Below are the following codes.

First is creating a circle for the hover effect.

<a href="#" id="circle" class="ec-circle">

<h3>Hovered</h3>

</a>

Below is the style:

 .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 definition for the hover effect but not a dynamic pseudo-class :hover.

.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);

}

Add the pseudo-class when Javascript is disabled. You can find the style in noscrpt.css.

.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 );

}

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');

}

};

Adding the ‘mouseenter’ hover class and removing it on ‘mouseleave’.

$('#circle').circlemouse({

onMouseEnter    : function( el ) {

el.addClass('ec-circle-hover');

},

onMouseLeave    : function( el ) {

el.removeClass('ec-circle-hover');

},

onClick         : function( el ) {

alert('clicked');

}

});

Click on the image to learn more about this cool tutorial.

Check the DEMO and download the SOURCE.

Incoming search terms for the article:

• circular web design
• Hover and Click Trigger for Circular Elements with jQuery
• jquery circular menu
• jquery circle hover
• effect hover mootools
• html5 circular image hover effect
• hovered hover and click trigger for circular elements with jquery
• jquery circle rollover
• hover trigger on border radius element
• hover and clicked javascript css trigger