css - 请问在移动端解决li:active滑动的时候不改变背景色
PHPz
PHPz 2017-04-17 14:35:31
0
3
1098

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

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

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

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

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

PHPz
PHPz

学习是最好的投资!

reply all(3)
PHPzhong

The best way is to use js. Use a delay function to automatically remove class

that adds background color
.active{
    background-color:#ddd;
}
$('li').on('click', function (e) {
    var _this = this;
    $(_this).addClass('active');
    setTimeout(function () {
        $(_this).removeClass('active');
    }, 150);
});
Ty80

The mobile sliding event is touchmove, maybe you can make a fuss about it. One solution is to remove :active and change to js event control

el.addEventListener('touchstart',function(){
      //加背景色
})

el.addEventListener('touchend',function(){
      //移除背景色
})

el.addEventListener('touchmove',function(){
      //如果有背景色,就移除
})
洪涛

This seems to be the case?

body:active li:active,
li {
    background-color: initial;
}
li:active{
    background-color: #ddd;
}

The code has not been tested for mobile phone answering, but if you use css, it feels like it is written like this; or you can use js directly.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!