Question

您好Stackoverflow社区，我很难搞清楚这一点，我正在使用CSS来改变正常/点击/悬停按钮的状态。

继承我的HTML，只是按钮所在的div层

<div id="newsarticle"><a href="/twitter.html" id="button-twitter"></a></div>

继承人我的css

/*Twitter */
#button-twitter {
display: block;
width: 100px;
height: 20px;
background:url('../images/btns/quicklinks-normalState-twitter.png'); no-repeat top;
        }                   
#button-twitter:hover {
background:url('../images/btns/quicklinks-hoverState-twitter.png') no-repeat top;
}
#button-twitter:active {
background: url('../images/btns/quicklinks-clickedState-twitter.png') no-repeat top;
/*Twitter */

在移动和Ipad上发生的事情是，当你点击时，你切换到活动状态，然后它就会消失，你等一会儿丢失按钮，直到你转到下一页。

这不会发生在桌面移动和ipads上，有没有人有任何想法？

Answer 1

我认为这里可能发生的事情是移动设备上的点击事件没有被足够快地触发（在链接上的动作请求之前）。我建议将其添加到您的身体：

   <body ontouchstart="">
    ...
   </body>

或者，您可以查看一个名为Fastclick的小型JS库。

按钮图像状态：单击时Png文件消失

1 个答案: