大家好沈善，我是IT修真院北京分院第22期的學(xué)員楊綱，一枚正直純潔善良的WEB前端程序員椭蹄。
今天給大家分享一下闻牡，在手機(jī)上沒有HOVER效果時(shí)應(yīng)該怎么辦？
1.背景介紹
怎么發(fā)現(xiàn)hover在手機(jī)上沒效果绳矩？
某一天夜晚罩润，觀天象異星突現(xiàn)，猛然一驚翼馆，急忙拿出手機(jī)檢查白日剛修煉到第七層的CSS功法割以， 想著hover光環(huán)效果乃我得意之作，可萬萬不能有事应媚！手止不住的顫抖著严沥，點(diǎn)擊屏幕都十分費(fèi)勁， 五分鐘后中姜，終于運(yùn)行出了第七層功法--投票頁祝峻，觸上玩家卡牌區(qū)域....
該死的！我的hover呢扎筒？莱找？？
2.知識(shí)剖析
W3C定義----
:hover用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素嗜桌，可用于所有元素奥溺，不只是鏈接。
2.2? ? 為啥HOVER在手機(jī)上沒效果骨宠？
讓我們?cè)倩仡櫼幌耯over的定義...
:hover用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素浮定。
再想一想...
手機(jī)上哪來的鼠標(biāo)啊伙計(jì)相满？！
SO,手機(jī)端沒有hover特效桦卒，當(dāng)你點(diǎn)擊的時(shí)候就直接觸發(fā)click立美。
3.常見問題
手機(jī)上沒有HOVER效果時(shí)應(yīng)該怎么辦？
4.解決方案
首先方灾，經(jīng)試驗(yàn)發(fā)現(xiàn)建蹄，設(shè)置的：hover在Android系統(tǒng)上點(diǎn)擊會(huì)出現(xiàn)， 但是需要再次點(diǎn)擊才會(huì)消失裕偿；IOS系統(tǒng)上點(diǎn)擊無法出現(xiàn)洞慎；
然后來看一下解決的方法...
手機(jī)雖然沒有鼠標(biāo)，但是咱有觸摸事件昂偌劲腿！
一開始觸摸事件是ios版Safari瀏覽器為了向開發(fā)人員傳達(dá)一些信息新添加的事件。 因?yàn)閕os設(shè)備既沒有鼠標(biāo)也沒有鍵盤鸟妙，所以在為移動(dòng)Safari瀏覽器開發(fā)交互性網(wǎng)頁的時(shí)候焦人， PC端的鼠標(biāo)和鍵盤事件是不夠用的。
在iPhone 3G發(fā)布的時(shí)候重父，其自帶的移動(dòng)Safari瀏覽器就提供了一些與觸摸(touch)操作相關(guān)的新事件垃瞧。 隨后，Android上的瀏覽器也實(shí)現(xiàn)了相同的事件坪郭。觸摸事件(touch)會(huì)在用戶手指放在屏幕上面的時(shí)候、 在屏幕上滑動(dòng)的時(shí)候或者是從屏幕上移開的時(shí)候觸發(fā)脉幢。
1.touchstart事件：當(dāng)手指觸摸屏幕時(shí)候觸發(fā)歪沃，即使已經(jīng)有一個(gè)手指放在屏幕上也會(huì)觸發(fā)。
2.touchmove事件：當(dāng)手指在屏幕上滑動(dòng)的時(shí)候連續(xù)地觸發(fā)嫌松。在這個(gè)事件發(fā)生期間沪曙， 調(diào)用preventDefault()事件可以阻止?jié)L動(dòng)。
3.touchend事件：當(dāng)手指從屏幕上離開的時(shí)候觸發(fā)萎羔。
4.touchcancel事件：touchcancel液走，是在拖動(dòng)中斷時(shí)候觸發(fā)。
（PS:主要的是前三個(gè)觸摸事件）
5.編碼實(shí)戰(zhàn)
document.addEventListener('touchstart', touch,false);
這行代碼的意思是贾陷，添加一個(gè)一個(gè)觸摸事件缘眶，
varevent = event || window.event;
聲明event=event或window.event,因?yàn)閣indow.event只在IE下是這樣的。他并不是標(biāo)準(zhǔn),其他瀏覽器并不支持.x寫在這里是為了兼容ie瀏覽器髓废。
.getElementById("inp");
返回id為“imp”的第一個(gè)元素巷懈。
上面是觸摸后的手機(jī)端頁面，下面的數(shù)字是他的x和y的坐標(biāo)慌洪。touch事件的一個(gè)特點(diǎn)就是可以返回touch的位置信息顶燕，且touch可以在一個(gè)觸摸事件發(fā)生的同時(shí)進(jìn)行另一次或多次觸摸（這一點(diǎn)是touch相對(duì)hover的優(yōu)點(diǎn)）凑保，
上面這個(gè)例子太過簡(jiǎn)單，只介紹了touch事件在觸摸時(shí)的幾種事件涌攻，但是不能更好的演示touch事件是怎么具體應(yīng)用手機(jī)端欧引，達(dá)到可以替代hover效果的。我自己又做了一點(diǎn)補(bǔ)充恳谎。
在我們?nèi)蝿?wù)七的基礎(chǔ)上芝此，為了演示方便，我們注銷掉他原本的hover事件代碼
為了演示方便惠爽，我們注銷掉他原本的hover事件代碼
/*.main-content-part-role:hover .main-content-part-icon {*/
/*opacity: 1;*/
/*}*/
因?yàn)闉g覽器的問題癌蓖，我們接下來使用jquery，給.main-content-part-icon（四個(gè)小圖標(biāo)的父元素）添加這個(gè)命令
($(".main-content-part-icon"));
$(".main-content-part-icon").css("opacity","1");
break;
這樣可以在手機(jī)端實(shí)現(xiàn)了類似于hover的效果婚肆。
6.擴(kuò)展思考
手機(jī)上除了觸摸事件租副，還有觸摸手勢(shì)，怎么用呢较性？
可以利用插件來實(shí)現(xiàn)用僧，比如，jQuery里有手勢(shì)的插件赞咙， 移動(dòng)端的zepto庫也有手勢(shì)插件责循，還有QuoJS的手勢(shì)插件（不依賴任何庫）。
7.參考文獻(xiàn)
參考一：Hover手機(jī)端的實(shí)現(xiàn)
參考三：HTML5實(shí)戰(zhàn)與剖析之觸摸事件(touchstart攀操、touchmove和touchend)
參考四：HTML5觸摸事件(touchstart院仿、touchmove和touchend)
8.更多討論
現(xiàn)在用移動(dòng)設(shè)備的越來越多，
怎么讓寫的頁面更好的適應(yīng)移動(dòng)設(shè)備呢速和？
鳴謝
感謝大家觀看
BY : 萬維娜歹垫，楊綱
ppt鏈接：https://ptteng.github.io/PPT/PPT/css-07-Hover22.html#/
視頻鏈接：https://v.qq.com/x/page/o0517cpronb.html
今天的分享就到這里啦，歡迎大家點(diǎn)贊颠放、轉(zhuǎn)發(fā)排惨、留言、拍磚~
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個(gè)工程師碰凶，現(xiàn)在開始暮芭，找個(gè)師兄，帶你入門欲低，掌控自己學(xué)習(xí)的節(jié)奏辕宏，學(xué)習(xí)的路上不再迷茫”砾莱。
這里是技能樹.IT修真院匾效，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化恤磷，成長(zhǎng)可見化面哼，師兄1對(duì)1免費(fèi)指導(dǎo)野宜。快來與我一起學(xué)習(xí)吧?魔策！
