84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
现在有一个列表页。是有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也行。