84669 orang belajar
152542 orang belajar
20005 orang belajar
5487 orang belajar
7821 orang belajar
359900 orang belajar
3350 orang belajar
180660 orang belajar
48569 orang belajar
18603 orang belajar
40936 orang belajar
1549 orang belajar
1183 orang belajar
32909 orang belajar
现在有一个列表页。是有li 组成的。如下
<li>你好</li> <li>你好</li> <li>你好</li> <li>你好</li>
在手机上点击的时候希望有些反馈。所以就加了下面的css
li:active{ background-color:#ddd; }
但是在移动端滑动的时候,手指触摸到这些li节点上的时候也会变色。请问怎么处理可以只是点击的时候触发背景色改变。而在滑动的时候不触发背景色改变呢?
学习是最好的投资!
最好的办法还是使用js吧。使用一个延时函数,自动去除添加背景色的class
class
.active{ background-color:#ddd; }
$('li').on('click', function (e) { var _this = this; $(_this).addClass('active'); setTimeout(function () { $(_this).removeClass('active'); }, 150); });
移动端滑动事件是touchmove,或许你可以在这上面做做文章。一种方案,去掉:active,改为js事件控制
el.addEventListener('touchstart',function(){ //加背景色 }) el.addEventListener('touchend',function(){ //移除背景色 }) el.addEventListener('touchmove',function(){ //如果有背景色,就移除 })
似乎应该是这样?
body:active li:active, li { background-color: initial; } li:active{ background-color: #ddd; }
手机答题,代码并没测试过,不过如果用css感觉是这样写的;或者直接用js也行。
最好的办法还是使用js吧。使用一个延时函数,自动去除添加背景色的
class
移动端滑动事件是touchmove,或许你可以在这上面做做文章。一种方案,去掉:active,改为js事件控制
似乎应该是这样?
手机答题,代码并没测试过,不过如果用css感觉是这样写的;或者直接用js也行。