iphone safari css不兼容CSS的active吗

来源：蜘蛛抓取(WebSpider) 时间：2016-11-21 10:42 标签： css active
移动端网页解决CSS的active伪类无效的方法
作者：清枫草塘
字体：[ ] 来源：freshlover的专栏 时间：09-26 12:00:52
这篇文章主要介绍了移动端网页解决CSS的active伪类无效的方法,注意一下移动端各个浏览器的兼容问题,需要的朋友可以参考下
：active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式。最常用于锚点&a href=&#&&这种情况，一般主流浏览器下也支持其他元素，如button等。在多按键的鼠标系统中，：active只适用于主按键，目前的大部分情况都是左键即主键。该伪类下定义的CSS样式只在按下鼠标按钮与释放鼠标按钮之间的短暂瞬间被触发显示。使用键盘的tab键也可以触发:active状态。
说到：active伪类就不得不提到:link,:visited,:hover,:active这个四个，最常用的是用于a链接，设定鼠标交互时不同的链接颜色。如下示例：
a:link&{&&& &&
&&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 :linkOV :visitedE
H :hoverA :activeTE
浏览器兼容性：项目中是移动端页面要做一个按钮状态切换的效果，在PC上测试没有问题，到了手机端发现安卓的正常，iOS则没有效果。
.slotbtn{&& &&
&&&&width:&5.5&& &&
&&&&height:&4&& &&
&&&&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代码：
&class=&row&tc&row-sbtn&&id=&slotbtn&&class=&slotbtn&&&&&
页面截图：虽然知道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 &body&.
看来在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。
document.body.addEventListener('touchstart',&function&()&{&//...空函数即可});&&&&
将上述事件监听代码加上后，Safari Mobile上就可以看到按钮按下后的切换效果了。
大家感兴趣的内容
12345678910
最近更新的内容移动端css active伪类无效果的原因
移动端css active伪类无效果的原因
[摘要：经由一番查找，以后正在mozilla开辟社区找到了：active没有起感化的谜底：
[1] By default, Safari Mobile does not use the :active state unless there is a touc]
经过一番查找，之后在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 &body&.
看来在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。
document.body.addEventListener('touchstart',&function&()&{&//...空函数即可}); &
将上述事件监听代码加上后，Safari Mobile上就可以看到按钮按下后的切换效果了。
感谢关注 Ithao123CSS频道，是专门为互联网人打造的学习交流平台，全面满足互联网人工作与学习需求，更多互联网资讯尽在 IThao123!
Laravel是一套简洁、优雅的PHP Web开发框架(PHP Web Framework)。它可以让你从面条一样杂乱的代码中解脱出来；它可以帮你构建一个完美的网络APP，而且每行代码都可以简洁、富于表达力。
产品设计是互联网产品经理的核心能力，一个好的产品经理一定在产品设计方面有扎实的功底，本专题将从互联网产品设计的几个方面谈谈产品设计
随着国内互联网的发展，产品经理岗位需求大幅增加，在国内，从事产品工作的大部分岗位为产品经理，其实现实中，很多从事产品工作的岗位是不能称为产品经理，主要原因是对产品经理的职责不明确，那产品经理的职责有哪些，本专题将详细介绍产品经理的主要职责
PHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点，利于学习，使用广泛，主要适用于Web开发领域。PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法。它可以比CGI或者Perl更快速地执行动态网页。用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML（标准通用标记语言下的一个应用）文档中去执行，执行效率比完全生成HTML标记的CGI要高许多；PHP还可以执行编译后代码，编译可以达到加密和优化代码运行，使代码运行更快。
IThao123周刊

我要回帖

更多关于 css active 的文章

 

随机推荐