在某些版本的safari上,:active偽類不生效,可以通過css和js兩種方式hack一下:
html
<div class="button"> 點選時我應該變紅 </div>
css
.button{ display:block; width:200px; height:40px; margin-top:10px; border-radius:6px; border:1px solid #ccc; line-height:40px; text-align:center; } .button:active,
.button.active // this is for js hack
{ background-color:red; cursor:pointer;/*mind add this line to make your work easy*/ }
javascript
document.addEventListener('DOMContentLoaded',function(){
//we will add the .active class the elements which has a .button class document.body.addEventListener('touchstart',function(eve) { if(eve.target.classList.contains('button')) { eve.target.classList.add('active'); } });
//remove the .active when you finish the touch event document.body.addEventListener('touchend',function(eve) { if(eve.target.classList.contains('button')) { eve.target.classList.remove('active'); } }); });
online demo