巧用scss解决移动端浏览器点击链接后残留hover效果

移动端浏览器点击链接后有很讨厌的残留hover效果

参见 Fixing Sticky Hover on Mobile Devices

但是上面这文章有一个问题，就是我还想要有按下的效果，只是点完之后别残留hover的效果。也就是我需要去掉hover，保留active。另外上面的文章不太能解决我用vue组件动态加载css的问题。

其实，通过scss的mixin可以很简单的搞定这个问题

比如：

@mixin hover($hover) {
    .page{
        a:#{$hover},a:focus{
            color:#fe3;
        }
    }
}
@media (hover: hover) {
    @include hover(hover);
}
@media (hover: none) {
    @include hover(active);
}
复制代码

使iPhone safari支持a标签的active伪类 http://t.cn/R3XKE7d

只需给body绑定一个匿名空函数touchstart事件就可以正常使用active事件了，美团H5就这么做的：