移动端网页解决CSS主动伪类无效方法
active伪类是常用的一种连接方式设置点击状态或其他状态下。最常用的锚点,其他元素,如按钮,也是一般主流浏览器的支持下,在多按键鼠标系统,积极为主要的关键是只适用于大多数的目前的情况是左键,主要的关键。
在这个伪类中定义的CSS样式只在鼠标按键和鼠标键释放之间的短暂时刻触发。使用键盘的tab键也可以触发:活动状态。
至于:活跃的伪类必须提到:链接:访问:悬停:活动:四个最常用的是一个链接,设置不同的链接颜色时,鼠标交互:
CSS代码将内容复制到剪贴板。
一:链接{ / *是{链接},或链接其实ES的地方。
颜色:蓝色;
}
答:访问{
颜色:紫色;
}
答:悬停{
颜色:绿色;
}
答:活动{
颜色:红色;
}
上面的代码将是:访问,到最后,它将导致以下结果:如果访问了链接,a:访问将覆盖:活动和悬停:一个样式声明,该链接将总是显示为紫色,无论是悬停还是向下链接都将被激活,紫色。
因此,上面的代码必须被定义的顺序,一般称为lvha秩序::链接mdash;参观:悬停-- --活跃;为方便:内存,可以记录为爱hate
L:链接
o
V:访问
E
H:悬停
一:主动
T
E
浏览器的兼容性:
在项目中,它是移动终端页面进行按钮状态切换的效果。在PC机上没有问题,Android在手机终端是正常的。IOS没有效果。
源代码 uff1a
CSS代码将内容复制到剪贴板。
slotbtn {。
宽度:5.5rem;
身高:4rem;
背景:URL(。 / / SBTN图像,PNG)没有重复00;
WebKit的背景尺寸:100%汽车;
背景尺寸:100%汽车;
溢出:隐藏;
光标:指针;
颜色:透明的WebKit的水龙头;
WebKit的用户选择:无;
}
。slotbtn:活跃,slotbtn:焦点{。
背景图像:URL(。 / / sbtn_active PNG图像。);
}
HTML代码:
xml代码将内容复制到剪贴板。
页面截图:
虽然jQuery经常使用移动框架,把类操作的状态切换到按钮,但是感觉很麻烦,性能也不好。而且我们有一个习惯:主动的自然属性,为什么不合作呢
经过几次查找之后,Mozilla开发社区找到了答案:活动不工作:
{ 1 }默认情况下,Safari移动不使用:活动状态,除非。
看来,在iOS系统的移动设备,有必要结合的按钮元件或身体/ HTML激活touchstart事件:活跃状态。
CSS代码将内容复制到剪贴板。
Document.body.addEventListener('touchstart功能)({ } / /…函数可以是空的);
在添加上面提到的事件监视器代码后,您可以看到按钮按下后Safari移动的切换效果。