hoverMobile

HoverMobile.JS：JavaScript库，以模拟移动设备上的悬停效果

这个JavaScript库模拟了移动设备上的悬停效果，仅通过在LCD上移动手指来模拟指针。

示例1	示例2

请参阅您的移动设备上的示例，网址为http://www.gabrielconceicao.com/hovermobile或验证此库在我的网站上工作：http：//www.gabrielconceicao.com/

它如何工作？

当用户快速按三次LCD时，将显示一个指针，他可以将手指移到元素上，并以一定的悬停效果将其移动到元素上，并看到这种效果，例如在台式机上。如果该元素具有一些JavaScript“在悬停”代码上，它也将与侦听器一起运行。当他停止按下LCD时，指针消失了。

工作所需的仅有的三件事是：

• 将此库添加到您的网站；
• 在每个元素上定义一个。用a：悬停伪类类并复制相同的逻辑。
• 在悬停的听众中，定义了触摸端和触摸事件。

当库将元素悬停在元素上时，图书馆将发射触摸剂，并在离开元素时开火。

：Hover CSS伪类效应：它如何在此库中在移动设备中工作？

在您的样式表文件中创建.Bover类，以模拟：Hover效果。您要做的就是将此伪类的内容重复为.Hover类。例子：

 button:hover{
	background-color: red;
}

您要做的就是创建一个这样的新课程：

 button.hover{
	background-color: red;
}

JavaScript：在此库中，鼠标活动在移动设备上工作的需要什么？

简单地在元素上定义触摸端和触摸式事件，图书馆将解雇这些事件。

例子：

 $('button').on('mouseover touchenter', function(e) {
	// make something cool on hover
});

$('button').on('mouseleave touchleave', function(e) {
	// make something cool on leave
});

选项和Intialization

您可以启动此库，使用此参数调用开始函数：

	<script type="text/javascript">
		gO.ready( function(){
			hoverMobile.start({
				pointerEl: '.pointer',	
				animateEls: 'a,button,.more',	
				hideAfterTouch: true,
				showPointer: true,
				pointerOffsetX: 20,
				pointerOffsetY: 70,		
				delayPointer: 200,			
				fireHoverEvent: true,
				applyHoverCssEffect: true,	
				hoverClassName: 'hover',
			});
		});
	</script>

参数“ Animateels”定义了DOM的哪些元素将显示效果。

请参阅实施的示例：https：//github.com/gabrielpconceicao/hovermobile/blob/master/index.html#l33

该库取决于go.library。有关此信息的更多信息，请参见https://github.com/gabrielpconceicao/go-library

＃在开发过程中