提问者:小点点

移动设备上的问题:HTML标记不工作


我有一个非常简单的web应用程序,它将div显示为菜单,然后在底部有一个“confirm”按钮。通过标记/code>启动确认

<a href="Shop.asp" id="ConfirmButton" name="ConfirmButton">
    Submit Order <i class="fa fa-arrow-circle-right"></i>
</a>

所以,这个应用程序(和“确认”按钮)在我测试过的任何浏览器(Chrome,Firefox,Edge,Opera)上都能完美运行。

在移动webbrowser(Android和IOS webbrowser)上,当用户在/code>标记上单击TAP/Click时,似乎没有任何动作。在Windows上一切正常,但在移动设备上什么也不发生。

/code>标记是在CSS上定义的

::after, ::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.button > a {
display: inline-block;
width: calc(50% - 0px);
padding: 12px;
background-color: #D10024;
color: #FFF;
text-align: center;
font-weight: 700;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
a:hover, a:focus {
    color: #D10024;
    text-decoration: none;
    outline: none;
}
a:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}
.button { //on DIV style
    visibility: visible;
}

按钮前面没有div。我试图截获按钮的事件,但什么也没有发生。

有没有一种方法可以识别是什么阻止/code>标记的执行,并检查移动设备上HTML/Javascript代码的兼容性?


共1个答案

匿名用户

在移动设备上悬停是不可能的。

尝试:CSS中的Active或JavaScript中的onclick。

或ontouchstart来模拟悬停的效果。

https://www.w3schools.com/jsref/event_touchstart.asp

还有,我给你找了一篇文章:

https://medium.com/@mezoistvan/finally-a-css-only-Solution-to-Hover-on-TouchScreens-C498AF39C31C

相关问题