按钮图像状态：点击时Png文件消失答案

【问题标题】：Button Image states: Png files disappear when clicked按钮图像状态：点击时Png文件消失
【发布时间】：2013-01-20 07:18:08
【问题描述】：

您好 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 上发生的情况是，当您单击时，您切换到活动状态，然后它就消失了，您在缺少按钮的情况下等待片刻，直到您转到下一页。

这不会发生在桌面移动设备和 ipad 上，有人知道吗？

【问题讨论】：

标签： html css button mobile png

【解决方案1】：

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

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

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

【讨论】：

不幸的是，这无济于事，但我可以看到你的用意，我也认为它是类似的东西，只是不知道要添加什么！
我知道 :hover 伪类在苹果设备上不起作用，除非您使用 javascript 专门定义自己的功能。您可以尝试将 ontouchstart 应用于 div 本身。