今天給大家分享一下，在手機(jī)上沒有HOVER效果時(shí)應(yīng)該怎么辦？
1.背景介紹
怎么發(fā)現(xiàn)hover在手機(jī)上沒效果？
某一天夜晚，觀天象異星突現(xiàn)，猛然一驚，急忙拿出手機(jī)檢查白日剛修煉到第七層的CSS功法， 想著hover光環(huán)效果乃我得意之作，可萬萬不能有事！手止不住的顫抖著，點(diǎn)擊屏幕都十分費(fèi)勁， 五分鐘后，終于運(yùn)行出了第七層功法--投票頁(yè)，觸上玩家卡牌區(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)頁(yè)的時(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ī)端頁(yè)面，下面的數(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庫(kù)也有手勢(shì)插件，還有QuoJS的手勢(shì)插件（不依賴任何庫(kù)）。
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è)面更好的適應(yīng)移動(dòng)設(shè)備呢？
鳴謝
感謝大家觀看
BY : 萬維娜，楊綱
