84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
现在有一个列表页。是有li 组成的。如下
<li>你好</li> <li>你好</li> <li>你好</li> <li>你好</li>
在手机上点击的时候希望有些反馈。所以就加了下面的css
li:active{ background-color:#ddd; }
但是在移动端滑动的时候，手指触摸到这些li节点上的时候也会变色。请问怎么处理可以只是点击的时候触发背景色改变。而在滑动的时候不触发背景色改变呢？
学习是最好的投资！
The best way is to use js. Use a delay function to automatically remove class
class
.active{ background-color:#ddd; }
$('li').on('click', function (e) { var _this = this; $(_this).addClass('active'); setTimeout(function () { $(_this).removeClass('active'); }, 150); });
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.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The best way is to use js. Use a delay function to automatically remove
that adds background colorclassThe 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
This seems to be the case?
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.