您现在的位置是：网站首页> 编程资料编程资料
移动端网页解决CSS的active伪类无效的方法CSS :active 伪类 元素被激活时的样式 a标签的四个css伪类(link、visited、hover、active)样式理解
2021-09-05
881人已围观
简介 这篇文章主要介绍了移动端网页解决CSS的active伪类无效的方法,注意一下移动端各个浏览器的兼容问题,需要的朋友可以参考下
：active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式。最常用于锚点这种情况，一般主流浏览器下也支持其他元素，如button等。在多按键的鼠标系统中，：active只适用于主按键，目前的大部分情况都是左键即主键。
该伪类下定义的CSS样式只在按下鼠标按钮与释放鼠标按钮之间的短暂瞬间被触发显示。使用键盘的tab键也可以触发:active状态。
说到：active伪类就不得不提到:link,:visited,:hover,:active这个四个，最常用的是用于a链接，设定鼠标交互时不同的链接颜色。如下示例：
- a:link { /* Essentially means a[href], or that the link actually goes somewhere */
- color: blue;
- }
- a:visited {
- color: purple;
- }
- a:hover {
- color: green;
- }
- a:active {
- color: red;
- }
上述代码中，将 :visited放到最后，则会导致以下结果：若链接已经被访问过，a:visited会覆盖:active和:hover的样式声明，链接将总是呈现为紫色，无论鼠标悬停还是按下激活，链接都将保持为紫色。
基于此原因，上述代码必须按照顺序定义，一般称为LVHA-order: :link — :visited — :hover — :active，为方便记忆，可记为“LOVE HATE”
L :link
O
V :visited
E
H :hover
A :active
T
E
浏览器兼容性：
项目中是移动端页面要做一个按钮状态切换的效果，在PC上测试没有问题，到了手机端发现安卓的正常，iOS则没有效果。
源码：
- .slotbtn{
- width: 5.5rem;
- height: 4rem;
- background: url(../images/sbtn.png) no-repeat 0 0;
- -webkit-background-size: 100% auto;
- background-size: 100% auto;
- overflow: hidden;
- cursor: pointer;
- -webkit-tap-highlight-color:transparent;
- -webkit-user-select:none;
- }
- .slotbtn:active, .slotbtn:focus{
- background-image: url(../images/sbtn_active.png);
- }
html代码：
- <div class="row tc row-sbtn"><span id="slotbtn" class="slotbtn">span>div>
页面截图：
虽然知道jQuery Mobile框架中常会用操作class的方法来进行按钮状态切换，不过觉得非常繁琐，性能不好。而且我们有:active的天然定制属性，为何不用而舍近求远呢？？
经过一番查找，之后在mozilla开发社区找到了：active不起作用的答案：
[1] By default, Safari Mobile does not use the :active state unless there is a touchstart event handler on the relevant element or on the
.看来在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。
- document.body.addEventListener('touchstart', function () { //...空函数即可});
将上述事件监听代码加上后，Safari Mobile上就可以看到按钮按下后的切换效果了。
相关内容
- 简析CSS表达式attr()的运用CSS计数器counter()的用法简介进一步理解CSS编程中的块级元素和行内元素
- CSS计数器counter()的用法简介通过CSS3的object-fit来调整图片适配尺寸的技巧简介CSS中的伪元素简介简介CSS中的各种选择符Markdown.css样式简介CSS3 Columns分列式布局方法简介定义css设备类型-Media Queries图表简介及使用方法css3背景图片透明叠加属性cross-fade简介及用法实例
- 进一步理解CSS编程中的块级元素和行内元素对行内元素和块级元素的一些认识浅谈CSS块级元素与行内元素(内联元素)的区别和联系 CSS行内元素和块级元素的居中实例分析全面了解行内元素与块级元素的区别
- 纯CSS+XHTML实现的二级导航菜单效果纯CSS实现超简单的二级下拉导航菜单代码一款纯css3实现的竖形二级导航的实例教程实列教程 一款基于jquery和css3的响应式二级导航菜单一款纯css实现的漂亮导航菜单(也适用于个人中心)简单的二级菜单导航实现css代码CSS3 二级导航菜单的制作的示例
- 基于html和CSS3制作酷炫的导航栏使用HTML+Css+transform实现3D导航栏的示例代码html+css+js实现导航栏滚动渐变效果Html5导航栏吸顶方案原理与对比实现html5 横向滑动导航栏的方法示例html+css 实现简易导航栏功能基于html和CSS3制作简单侧边导航栏使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
- DIV+CSS实现仿京东商城导航条效果div+css实现鼠标经过背景高亮的导航菜单代码div+css实现软件公司网站蓝色导航菜单代码div+css实现蓝色vista风格css导航菜单效果div+css实现仿猪八戒首页导航菜单效果DIV+CSS实现的天猫知名商家店铺导航汇总页面效果源码div+css纵向导航如何实现且为导航添加超链接
- CSS基于单张背景图实现自适应宽度的圆角菜单效果代码纯css实现蓝色圆角效果水平导航菜单代码纯CSS实现圆角折叠菜单的方法纯CSS3实现的圆角彩色多功能超酷导航菜单效果CSS3实现矩形圆角方块层叠菜单鼠标滑过突出显示效果CSS蓝色自适应宽度圆角水平导航菜单效果纯css实现支付宝下拉圆角导航菜单js+css实现圆角二级菜单
- 纯CSS实现的三级导航菜单效果代码纯CSS实现超简单的二级下拉导航菜单代码基于CSS3实现的黑色个性导航菜单效果CSS实现带阴影效果的黑色导航菜单效果div+css实现鼠标经过背景高亮的导航菜单代码div+css实现软件公司网站蓝色导航菜单代码纯css实现蓝色圆角效果水平导航菜单代码css实现适用于团购网站的橙色导航菜单代码纯CSS实现的菱形导航菜单效果代码CSS3实现银灰色动画效果的导航菜单代码
- 基于CSS实现的4级下拉菜单效果代码纯CSS实现下拉菜单的示例代码CSS3模拟动画下拉菜单效果CSS导航栏及弹窗示例代码CSS下拉菜单简单制作教程 css制作黑色经典导航下拉菜单你值得拥有的CSS下拉菜单效果CSS实现的灰色下拉菜单效果代码纯CSS实现的大型下拉菜单的示例代码
- CSS怎么隐藏滚动条(三种方法)CSS实现隐藏滚动条并可以滚动内容效果(三种方式)css设置Overflow实现隐藏滚动条的同时又可以滚动css 给div添加滚动并隐藏滚动条 css隐藏移动端滚动条并且ios上平滑滚动的方法css设置滚动条颜色与样式以及如何去掉与隐藏滚动条css实现隐藏滚动条并可以滚动内容的实例代码
