讓你的:active好好工作

zyip發表於2016-05-23

在某些版本的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

 

JS Bin on jsbin.com

 

相關文章