大家好，我是IT修真院北京分院第22期的學(xué)員楊綱，一枚正直純潔善良的WEB前端程序員。
今天給大家分享一下，在手機上沒有HOVER效果時應(yīng)該怎么辦？
1.背景介紹
怎么發(fā)現(xiàn)hover在手機上沒效果？
某一天夜晚，觀天象異星突現(xiàn)，猛然一驚，急忙拿出手機檢查白日剛修煉到第七層的CSS功法， 想著hover光環(huán)效果乃我得意之作，可萬萬不能有事！手止不住的顫抖著，點擊屏幕都十分費勁， 五分鐘后，終于運行出了第七層功法--投票頁，觸上玩家卡牌區(qū)域....
該死的！我的hover呢？？？
2.知識剖析
W3C定義----
:hover用于選擇鼠標(biāo)指針浮動在上面的元素，可用于所有元素，不只是鏈接。
2.2? ? 為啥HOVER在手機上沒效果？
讓我們再回顧一下hover的定義...
:hover用于選擇鼠標(biāo)指針浮動在上面的元素。
再想一想...
手機上哪來的鼠標(biāo)啊伙計？！
SO,手機端沒有hover特效，當(dāng)你點擊的時候就直接觸發(fā)click。
3.常見問題
手機上沒有HOVER效果時應(yīng)該怎么辦？
4.解決方案
首先，經(jīng)試驗發(fā)現(xiàn)，設(shè)置的：hover在Android系統(tǒng)上點擊會出現(xiàn)， 但是需要再次點擊才會消失；IOS系統(tǒng)上點擊無法出現(xiàn)；
然后來看一下解決的方法...
手機雖然沒有鼠標(biāo)，但是咱有觸摸事件??！
一開始觸摸事件是ios版Safari瀏覽器為了向開發(fā)人員傳達一些信息新添加的事件。 因為ios設(shè)備既沒有鼠標(biāo)也沒有鍵盤，所以在為移動Safari瀏覽器開發(fā)交互性網(wǎng)頁的時候， PC端的鼠標(biāo)和鍵盤事件是不夠用的。
在iPhone 3G發(fā)布的時候，其自帶的移動Safari瀏覽器就提供了一些與觸摸(touch)操作相關(guān)的新事件。 隨后，Android上的瀏覽器也實現(xiàn)了相同的事件。觸摸事件(touch)會在用戶手指放在屏幕上面的時候、 在屏幕上滑動的時候或者是從屏幕上移開的時候觸發(fā)。
1.touchstart事件：當(dāng)手指觸摸屏幕時候觸發(fā)，即使已經(jīng)有一個手指放在屏幕上也會觸發(fā)。
2.touchmove事件：當(dāng)手指在屏幕上滑動的時候連續(xù)地觸發(fā)。在這個事件發(fā)生期間， 調(diào)用preventDefault()事件可以阻止?jié)L動。
3.touchend事件：當(dāng)手指從屏幕上離開的時候觸發(fā)。
4.touchcancel事件：touchcancel，是在拖動中斷時候觸發(fā)。
（PS:主要的是前三個觸摸事件）
5.編碼實戰(zhàn)
document.addEventListener('touchstart', touch,false);
這行代碼的意思是，添加一個一個觸摸事件，
varevent = event || window.event;
聲明event=event或window.event,因為window.event只在IE下是這樣的。他并不是標(biāo)準(zhǔn),其他瀏覽器并不支持.x寫在這里是為了兼容ie瀏覽器。
.getElementById("inp");
返回id為“imp”的第一個元素。
上面是觸摸后的手機端頁面，下面的數(shù)字是他的x和y的坐標(biāo)。touch事件的一個特點就是可以返回touch的位置信息，且touch可以在一個觸摸事件發(fā)生的同時進行另一次或多次觸摸（這一點是touch相對hover的優(yōu)點），
上面這個例子太過簡單，只介紹了touch事件在觸摸時的幾種事件，但是不能更好的演示touch事件是怎么具體應(yīng)用手機端，達到可以替代hover效果的。我自己又做了一點補充。
在我們?nèi)蝿?wù)七的基礎(chǔ)上，為了演示方便，我們注銷掉他原本的hover事件代碼
為了演示方便，我們注銷掉他原本的hover事件代碼
/*.main-content-part-role:hover .main-content-part-icon {*/
/*opacity: 1;*/
/*}*/
因為瀏覽器的問題，我們接下來使用jquery，給.main-content-part-icon（四個小圖標(biāo)的父元素）添加這個命令
($(".main-content-part-icon"));
$(".main-content-part-icon").css("opacity","1");
break;
這樣可以在手機端實現(xiàn)了類似于hover的效果。
6.擴展思考
手機上除了觸摸事件，還有觸摸手勢，怎么用呢？
可以利用插件來實現(xiàn)，比如，jQuery里有手勢的插件， 移動端的zepto庫也有手勢插件，還有QuoJS的手勢插件（不依賴任何庫）。
7.參考文獻
參考三：HTML5實戰(zhàn)與剖析之觸摸事件(touchstart、touchmove和touchend)
參考四：HTML5觸摸事件(touchstart、touchmove和touchend)
8.更多討論
現(xiàn)在用移動設(shè)備的越來越多，
怎么讓寫的頁面更好的適應(yīng)移動設(shè)備呢？
鳴謝
感謝大家觀看
BY : 萬維娜，楊綱
ppt鏈接：https://ptteng.github.io/PPT/PPT/css-07-Hover22.html#/
視頻鏈接：https://v.qq.com/x/page/o0517cpronb.html
今天的分享就到這里啦，歡迎大家點贊、轉(zhuǎn)發(fā)、留言、拍磚~
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現(xiàn)在開始，找個師兄，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷茫”。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化，成長可見化，師兄1對1免費指導(dǎo)?？靵砼c我一起學(xué)習(xí)吧?！
