css - 請問在移動端解決li:active滑動的時候不改變背景色
問題描述
現(xiàn)在有一個列表頁。是有l(wèi)i 組成的。如下
<li>你好</li><li>你好</li><li>你好</li><li>你好</li>
在手機上點擊的時候希望有些反饋。所以就加了下面的css
li:active{ background-color:#ddd;}
但是在移動端滑動的時候,手指觸摸到這些li節(jié)點上的時候也會變色。請問怎么處理可以只是點擊的時候觸發(fā)背景色改變。而在滑動的時候不觸發(fā)背景色改變呢?
問題解答
回答1:最好的辦法還是使用js吧。使用一個延時函數(shù),自動去除添加背景色的class
.active{ background-color:#ddd;}
$(’li’).on(’click’, function (e) { var _this = this; $(_this).addClass(’active’); setTimeout(function () {$(_this).removeClass(’active’); }, 150);});回答2:
移動端滑動事件是touchmove,或許你可以在這上面做做文章。一種方案,去掉:active,改為js事件控制
el.addEventListener(’touchstart’,function(){ //加背景色})el.addEventListener(’touchend’,function(){ //移除背景色})el.addEventListener(’touchmove’,function(){ //如果有背景色,就移除})回答3:
似乎應(yīng)該是這樣?
body:active li:active,li { background-color: initial;}li:active{ background-color: #ddd;}
手機答題,代碼并沒測試過,不過如果用css感覺是這樣寫的;或者直接用js也行。
相關(guān)文章:
1. nignx - docker內(nèi)nginx 80端口被占用2. 關(guān)docker hub上有些鏡像的tag被標記““This image has vulnerabilities””3. 關(guān)于docker下的nginx壓力測試4. docker - 各位電腦上有多少個容器???容器一多,自己都搞混了,咋辦呢?5. mac里的docker如何命令行開啟呢?6. docker容器呢SSH為什么連不通呢?7. docker start -a dockername 老是卡住,什么情況?8. javascript - 連續(xù)點擊觸發(fā)mouseleave事件9. docker gitlab 如何git clone?10. macos - mac下docker如何設(shè)置代理

網(wǎng)公網(wǎng)安備