【问题标题】:Hover effect not working in android browser悬停效果在android浏览器中不起作用
【发布时间】:2017-03-30 04:02:59
【问题描述】:

我正在为这个网站设计一个移动布局,但由于某种原因,当我使用 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;
   }
 }

【问题讨论】:

  • 悬停可用于鼠标指针..而android没有。

标签: android html css responsive-design hover


【解决方案1】:

因为任何手机都不具备悬停功能。

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

我在网站上创建了画廊。悬停在图像上会显示共享链接,但在移动设备中,当用户点击图像时它会起作用

【讨论】:

  • 我希望事情就这么简单,我认为这是一个不同的问题。当我点击它们时,我的 nav.slide 悬停效果完全没有问题。只是我的画布外切换的悬停效果很难弹出。
  • 你可以给额外按钮以在移动视图中弹出图像视图
猜你喜欢
  • 1970-01-01
  • 2012-01-07
  • 2015-08-08
  • 1970-01-01
  • 2014-06-10
  • 2017-08-26
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多