Question

我正在为这个网站制作移动布局，但由于某些原因，每当我使用Android浏览器测试时，我的画布外切换的悬停效果都无法正常工作。悬停效果离画布导航链接工作得很好。我用于切换的图标是字体真棒字体的一部分。我现在还不太清楚该做什么。任何帮助将不胜感激。

相关的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

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

点击（TAP）将在android浏览器中悬停。

我在网站上创建了画廊。在图像上悬停显示共享链接，但在移动设备中，当图像上的用户TAP

时，它可以工作

悬停效果无法在Android浏览器中运行

1 个答案: