今天闲着没事在手机上看了一下自己的网站,一不小心发现个细节问题,那就是之前给传到顶部和底部的两个小手加鼠标经过背景颜色但在移动端点击后竟然不会消失,要再点一下其他位置背景颜色才消失。
查了很多资料最后发现只要在body上绑定一个空的touchstart事件即可:
document.body.addEventListener(‘touchstart’, function(){ });
或者直接写在body上加 ontouchstart=””:
不过这个在iOS上没问题但在安卓手机上有时候可以有时候又不行😣!
其他解决方案,可以改成用点击事件然后用active选择器,比较好但麻烦的解决方案是分别做PC端和移动端两套样式。
还有一种新的解决方案,那就是将所有要加hover效果的都放在@media (any-hover: hover)里写,这样在移动端就不会有hover效果了。
@media (any-hover: hover) {
.bottom-scroll:hover, .bottom-scroll:focus {
background-color: #00b9eb;
}
}
展开阅读全文
上一篇: 苏州园林
下一篇:如何让整个网站变黑白(灰色)?