Question

我有一些按钮，在悬停时有一个从黑色到黄色的CSS过渡，然后返回黑色。点击后，他们进行AJAX通话。当我将鼠标悬停在它们上并在所有桌面浏览器上单击鼠标（当然IE9和更低版本忽略它）时，它们可以很好地工作，但在iOS Safari和标准Android浏览器上，单击按钮后过渡保持黄色。它们不像桌面系统那样返回正常的黑色状态。

关于我出错的地方的任何线索将不胜感激。对于那些使用触摸设备的人来说，这个小提琴演示了问题 - http://jsfiddle.net/wpyz9whn/1/

CSS

a.button {
    background-color: #000000;
    color: #FFFFFF;
    border: none;
    text-decoration: none;
    padding: 0px 10px;
    display: block;
    line-height: 24px;
    font-weight: 700;
    text-align: center;
    transition: background 0.8s ease-out;
    -moz-transition: background 0.8s ease-out;
    -webkit-transition: background 0.8s ease-out;
    text-transform: uppercase;
    -webkit-appearance: none;
}
a.button:hover {
    background: #ffcc00;
    color: #000;
    transition: background 0.2s ease-in;
    -moz-transition: background 0.2s ease-in;
    -webkit-transition: background 0.2s ease-in;
}
a.button:active {
    background: #ff9c00;
    transition: background 0s ease-in;
    -moz-transition: background 0s ease-in;
    -webkit-transition: background 0s ease-in;
}
a.button:focus {
    outline: none;
}

HTML

<a class="button" onclick="return addToBasket(11628937,'/')">Add to Basket</a>

触摸设备上的CSS转换不会恢复到正常状态

0 个答案: