移动端css hover效果,css移动端:acitve效果的实现

做移动前端也有一些日子了，一直有个问题没有解决，就是与pc端那样的一个:hover的效果，:hover是鼠标指针浮动在其上的元素的一个选择器，但因为在移动端是没有鼠标的，代替的是触摸屏，用户也不是有“鼠标指针浮动在其上的元素”的情况，有也很少。所以取代的应该:active这个选择器，但是通过实践，发现情况不是很理想，在QQ浏览器上有时触发，有没不触发，在我mx3带自浏览器上根本没效果。

最近在看美团h5的页面时发现他们做对这个效果做得很好(这里说实话，美团网在h5这一块做得真好)，看了他们代码之后，发现他们也是用:active来实现这个效果，但他们多了一行js代码:

document.body.addEventListener('touchstart', function () { });

其实这行代码带没有做什么事，只是对body绑定了一个touchstart事件，然后也没做什么事。

自已实践了一下发现可以了，效果真心不错。赞一下美团。

ps:在移动端中浏览器会有自带的一个点击高亮效果，可以通过给a标签或者body,html加

-webkit-tap-highlight-color:transparent;

都行。

源码:

css移动端:acitve效果的实现

span:active {

background-color: red;

-webkit-tap-highlight-color: transparent;

}

span{

background-color: blue;

color: #fff;

padding: 5px 10px;

border-radius: 5px;

}

123

document.body.addEventListener('touchstart', function() {});

效果：

移动端css hover效果,css移动端:acitve效果的实现相关推荐

html css hover事件,css – 防止在父Div上触发Div的Hover事件？
根据定义,将鼠标悬停在孩子身上,也会悬停在父母身上. html事件中没有"阻塞". 有两个方法链,泡沫和捕获. Any event taking place in the W3C ...
css hover同级,CSS hover改变子标签/同级标签样式
.second { display: none; } .first:hover+.second, .second:hover { display: block; } /*第一个div hover时,改 ...
Html+Css+js实现春节倒计时效果（移动端和PC端）
目录前言导语效果预览 html部分移动端样式(mobile.css) pc端样式(style.css) js部分效果演示移动端 pc端总结下载地址前言我是歌谣我有个兄弟巅峰的时 ...
《uni-app》移动端纯CSS实现不等高的瀑布流效果
<uni-app>移动端纯CSS实现不等高的瀑布流效果前言示例 WEB端示例移动端示例瀑布流实现第一种: flex 核心代码实现缺点完整代码第二种:column-coun ...
css 波纹扩散_html5 +css3 点击后水波纹扩散效果兼容移动端
html5+ js +css3 点击后水波纹扩散效果兼容移动端-幸凡学习网 }.center{text-align:center}.btn{position:relative;width:13em; ...
JavaScript（三十七）——移动端、多媒体、CSS动画
目录移动端基础手机浏览器的内核是什么? 四大浏览器内核优缺点视口viewport rem 多媒体视频格式声音格式 CSS动画 CSS中的动画功能移动端基础大纲:视图.rem布局.媒体查询 ...
【CSS】关于CSS的几种移动端布局方式
关于CSS的几种移动端布局方式一.移动端布局 01.meta视口标签设置 02.移动布局的分类有哪些? 03.为什么需要二倍图? (1)物理像素和物理像素比 (2)二倍图(根据需要确定多倍图) (3 ...
《吐血整理》系列大厂前端组件库工具集合（PC端、移动端、JS、CSS等）
前言 Coding 应当是一生的事业,而不仅仅是 30 岁的青春饭本文已收录 GitHub https://github.com/ponkans/F2E,欢迎 Star,持续更新上一篇<吐血 ...
移动端屏幕适配和css美化浏览器自带的滚动条
一.css美化浏览器自带的滚动条: 浏览器自带的滚动条显示不太美观,我们可以调css样式来美化一下.了解以下浏览器(webkit内核)滚动条自带伪类样式: ::-webkit-scrollbar:针对 ...

移动端css hover效果,css移动端:acitve效果的实现

移动端css hover效果,css移动端:acitve效果的实现相关推荐

最新文章

热门文章