android - 悬停效果在 Android 浏览器中不起作用

Question

我正在为这个网站设计一个移动布局，但出于某种原因，每当我使用 Android 浏览器对其进行测试时，我的 Canvas 外切换的悬停效果都无法正常工作。 Canvas 外导航链接的悬停效果很好。我用于切换的图标是 font awesome 字体的一部分。我不太确定此时该做什么。任何帮助将不胜感激。

相关html:

<div class="mobile sb-slide">
       <span class="sb-toggle-left">
           <i class="fa fa-bars"></i>
       </span>      
 </div>
   <div class="sb-slidebar sb-left sb-style-push">
         <nav class="slide">
             <ul>
                 <li><a href="index.html" class="pink">Home</a></li>
                 <li><a href="about.html" class="orange">About</a></li>
                 <li><a href="contact.html" class="purple">Contact</a></li>
                 <li><a href="schedule.html">Schedule</a></li>
        </ul>
    </nav>
</div>

相关CSS:

div.mobile
{
    display: none;
    background-color: #64b2f5;
    border-bottom: 5px solid #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999999;
}

div.mobile span i
{
    color: #ffffff;
    font-size: 1.75em;
    padding: 0.4em 0.5em;
    cursor: pointer;
}

div.mobile span i:hover
{
    color: #000000;
    background-color: #ffffff;
    transition: 400ms ease;
} 

nav.slide ul
{
    display: -webkit-flex;
    display: -moz-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: right;
}

nav.slide ul li a
{
    display: block;
    text-decoration: none;
    color: #ffffff;
    font-size: 1.65em;
    padding: 0.45em 0.6em;
    border-bottom: 2px solid #ffffff;
}

nav.slide ul li a:hover
{
    color: #000000;
    background-color: #ffffff;
    outline: none;
}

nav.slide ul li a.pink:hover
{
    background-color: #d9618f;
}

nav.slide ul li a.orange:hover
{
    background-color: #5ee9ef;
}

nav.slide ul li a.purple:hover
{
    background-color: #9648a5; 
}

@media screen and (max-width:825px)
{
   div.mobile
   {
     display: block;
   }
 }

Answer 1

因为任何手机都没有像悬停这样的功能。

在 android 浏览器中点击(TAP)将作为悬停。

我在网站上创建了图库。将鼠标悬停在图片上会显示共享链接，但在移动设备中它会在用户点击图片时起作用