pc端移動端相容hover 和click

這幾天做公司的推廣頁，寫的頭疼，頁面倒是不難做，就是好久沒寫JQ了，生疏不少，加上基本上沒做過響應式，寫的好痛苦。
有些人會問，為什麼不用bootstrap這類的架構寫呢？我也很想用，但是推廣頁就一個靜态頁面，用架構是不是不太好，而且也要根據需求，在進行修改，很累的，是以果斷的放棄。
根據要求，移動端的呈現效果是縮小版的PC端頁面，于是我就用[flexible](https://blog.csdn.net/qq_38502227/article/details/100161262)做頁面的相容。但是裡面有一行内容在pc端呈現滑鼠經過顯示提示框，而在移動端是點選過後顯示提示框。
一開始，我用mouseenter() 、mouseover() 和 hover() ，但是發現不行，在pc端顯示正常，但是在移動端，點選時第一次是沒有顯示，第二次才顯示，這是個問題。
經過反複實踐，最後我感覺時差不多的。
思路如下：
           

1. 判斷時pc端還是移動端，根據不同的端來進行顯示提示框
2. pc端和移動分别添加不同的類名，進行區分，pc端滑鼠經過我用的是 .pcActive :hover
3. 移動端：先一個click函數，在裡面先判斷是否是移動端，是就移除 .pcActive :hover，接着根據條件添加 .appActive；不是就執行空
4. 在初始化時判斷是哪個端，然後分别添加類名或移除類名

// 從網上找的代碼，試用過，可行
let mobile_flag=isMobile();
$(function(){
	if(mobile_flag){
		//移動端
	}else {
		//pc端 
	}
})
function isMobile() {
	var userAgentInfo = navigator.userAgent;
	var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"];
	var mobile_flag = false;
	//根據userAgent判斷是否是手機
	for (var v = 0; v < mobileAgents.length; v++) {
		if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
			mobile_flag = true;
			break;
		}
	}
	var screen_width = window.screen.width;
	var screen_height = window.screen.height;   
	//根據螢幕分辨率判斷是否是手機
	if(screen_width < 500 && screen_height < 800){
		mobile_flag = true;
	}
	return mobile_flag;
}