Menerapkan
a:hover pseudo-class untuk elemen secara luas dikenal sebagai classic “hovering” di atas sebuah elemen pada halaman web. Masalah yang muncul dengan diperkenalkannya properti border-radius. Hal ini menjadi ekstrim ketika kita membuat lingkaran dengan menetapkan batas-radius persegi sampai 50% (setengah dari lebar dan tinggi luarnya).
Hari ini saya ingin berbagi salah satu solusi untuk masalah
circle hovering. Kami akan membuat sebuah plugin yang akan mengurus 'mouseenter', 'mouseleave' dan 'klik'.
Cara kerjanya
Dalam contoh kita, kita akan membuat sebuah lingkaran dengan beberapa jenis efek hover. Struktur hanya akan menjadi:
<a href="#" id="circle" class="ec-circle">
<h3>Hovered</h3>
</a>
CSS
.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;
}Sekarang, kita akan mendefinisikan sebuah
class untuk efek hover tapi bukan pseudo-class :hover yang dinamis. Idenya adalah untuk menerapkan
class ini maka dengan jQuery ketika kita memasuki area melingkar dari elemen tsb:
.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);
}Ketika kita memiliki JavaScript yg dinonaktifkan, kita akan menambahkan pseudo-class. CSS Style ini dapat ditemukan di noscript.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');
}
};
Dalam contoh kita akan menerapkan Plugin ke elemen terkait. Dalam masalah ini kita harus menambahkan hover class on ‘mouseenter’ dan 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');
}
});Ingat bahwa “normal” pseudo hover class juga didefinisikan dalam noscript.css yang akan diterapkan ketika JavaScript dinonaktifkan.
Sekian tutorial mengenai Hover and Click Trigger for Circular Elements with jQuery! Saya harap Anda menikmati tutorial ini dan menemukan inspirasi!