jquery鼠标悬停_使用jQuery将鼠标悬停并单击圆形元素的触发器

jquery鼠标悬停

View demo 查看演示 Download Source 下载源

Applying a :hover pseudo-class to an element is widely known as the classic “hovering” over an element on a web page. A problem that arose with the introduction of the border-radius property is the non-realistic triggering of the hover event when entering the bounding box of the element and not just the actual visible area. This becomes extreme when we create a circle by setting the border-radius of a square to 50% (half of its outer width and height).

将：hover伪类应用于元素被广泛称为网页上元素的经典“悬停”。 引入border-radius属性时出现的一个问题是，进入元素的边界框而不是实际的可见区域时，悬停事件的非现实触发。 当我们通过将正方形的边界半径设置为50％(其外部宽度和高度的一半)来创建圆形时，这变得非常极端。

Today we want to share one possible solution to the circle hovering problem. We’ll create a plugin that will take care of the ‘mouseenter’, ‘mouseleave’ and ‘click’ events to be triggered only on the circular shape of the element and not its bounding box.

今天，我们想分享一种解决圆盘旋问题的方法。 我们将创建一个插件来处理'mouseenter'，'mouseleave'和'click'事件，仅在元素的圆形而不是其边界框上触发它们。

The image used in the demo is by Andrey & Lili. They are licensed under the Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) License.

该演示中使用的图像是Andrey＆Lili制作的。 它们根据Attribution-NonCommercial 3.0 Unported(CC BY-NC 3.0)许可进行许可。

怎么运行的 (How it works)

In our example, we’ll be creating a circle with some kind of hover effect. The structure will simply be:

在我们的示例中，我们将创建一个具有某种悬停效果的圆。 结构将简单地为：

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

And the style will be the following:

样式如下：

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

Now, we will define a class for the hover effect but not a dynamic pseudo-class :hover. The idea is to apply this class then with jQuery when we enter the circular area of our element:

现在，我们将为悬停效果定义一个类，而不是动态伪类：hover。 想法是当我们输入元素的圆形区域时，将此类应用于jQuery：

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

Only when we have JavaScript disabled, we’ll add the pseudo-class. This style can be found in the noscript.css:

仅当禁用JavaScript时，我们才会添加伪类。 此样式可以在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(The JavaScript)

We are going to create a simple plugin that basically “redefines” the three events mentioned earlier. We’ll make the events only applicable on the circular shape:

我们将创建一个简单的插件，基本上“重新定义”前面提到的三个事件。 我们将使事件仅适用于圆形：

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

	}
};

When we enter with the mouse in the square bounding box of our circle, we bind the ‘mousemove’ event to the element and like that we can track if the distance of the mouse to the center of the element if longer than the radius. If it is, we know that we are not yet hovering the circular area of the element.

当我们在圆角的方形边界框中输入鼠标时，我们会将'mousemove'事件绑定到元素，并像我们可以跟踪鼠标到元素中心的距离是否大于半径(如果半径)。 如果是的话，我们知道我们还没有悬停元素的圆形区域。

Once the distance of the mouse is shorter than the radius, we know that we entered the circle and we trigger our custom ‘mouseenter’ event.

一旦鼠标的距离小于半径，我们就知道我们进入了圆并触发了自定义的“ mouseenter”事件。

We also only allow the click event when the mouse is inside of the circle.

当鼠标在圆内时，我们也仅允许click事件。

In our example we will then apply our plugin to the regarding element. In our case, we are adding the hover class on ‘mouseenter’ and removing it on ‘mouseleave’.

在我们的示例中，然后将我们的插件应用于About元素。 在我们的例子中，我们将鼠标悬停类添加到“ 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');
		
	}
});

Remember that the “normal” pseudo hover class is also defined in the noscript.css which gets applied when JavaScript is disabled.

请记住，noscript.css中也定义了“正常”的伪悬停类，当禁用JavaScript时会应用该类。

I hope you find this useful!

希望这个对你有帮助！

翻译自: https://tympanus.net/codrops/2011/11/22/hover-and-click-trigger-circular-elements/

jquery鼠标悬停