首頁  >  問答  >  主體

css - 请问在移动端解决li:active滑动的时候不改变背景色

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

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

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

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

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

PHPzPHPz2764 天前1122

全部回覆(3)我來回復

  • PHPz

    PHPz2017-04-17 14:37:31

    最好的方法還是使用js吧。使用一個延時函數,自動移除添加背景色的class

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

    回覆
    0
  • PHP中文网

    PHP中文网2017-04-17 14:37:31

    行動端滑動事件是touchmove,或許你可以在這上面做文章。一方案,去掉:active,改為js事件控制

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

    回覆
    0
  • PHP中文网

    PHP中文网2017-04-17 14:37:31

    似乎應該是這樣?

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

    手機答題,程式碼並沒測試過,不過如果用css感覺是這樣寫的;或者直接用js也行。

    回覆
    0
  • 取消回覆