hover如何在行動瀏覽器上觸發

標籤：blog   span   style   解決辦法   oid   java   hover   瀏覽器   javascrip   

例如HTML結構如下

<div>menu
<ul>    <li>item1</li>    <li>item2</li></ul>
</div>

CSS

div:hover ul {    display:block;}

 

如上代碼，當滑鼠懸浮到menu上時，顯示ul，但是由於行動瀏覽器沒有滑鼠，因此無法觸發css中的hover. 

解決辦法：可以用點擊來觸發hover

<div onclick="javascript:void(0)">menu<ul>    <li>item1</li>    <li>item2</li></ul></div>

 

給div加上onclick事件，點擊menu的時候，便會觸發hover，顯示ul. 但是這樣又會導致menu一直是hover狀態，那麼該怎麼離開hover狀態呢？

其實也很簡單，在menu之外的地方也添加一個onclick事件，當點擊menu之外的地方時，menu就離開了hover狀態。

<doby onclick="javascript:void(0)"> ...</body>

 

hover如何在行動瀏覽器上觸發