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

＃在開發過程中