css - 请问在移动端解决li:active滑动的时候不改变背景色

问题描述

问 题

现在有一个列表页。是有li 组成的。如下

<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>

在手机上点击的时候希望有些反馈。所以就加了下面的css

li:active{
    background-color:#ddd;
}

但是在移动端滑动的时候，手指触摸到这些li节点上的时候也会变色。请问怎么处理可以只是点击的时候触发背景色改变。而在滑动的时候不触发背景色改变呢？

解决方案

最好的办法还是使用js吧。使用一个延时函数，自动去除添加背景色的class

.active{
    background-color:#ddd;
}

$('li').on('click', function (e) {
    var _this = this;
    $(_this).addClass('active');
    setTimeout(function () {
        $(_this).removeClass('active');
    }, 150);
});

这篇关于css - 请问在移动端解决li:active滑动的时候不改变背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！