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