webkit-hover 在safari 的兼容性问题

问题描述

hover 在safari 的兼容性问题

hover 在苹果最新版的safari浏览器不兼容,第一次点击显示hover效果,第二次才进入链接。
查了下hover,应该是兼容webkit的,但是移动端这种效果感觉就不太好了,有什么办法解决吗?

解决方案

对于a标签的hover,确实有要注意的地方。那就是hover, visited, activate属性。
在设置这几个属性时,要注意顺序问题。否则你有可能会遇到点击链接一次之后,hover属性就不再起作用了。
顺序:visited, hover, activate。比如
a
&:visited
color blue
&:hover
color red

时间: 2025-01-16 22:44:52

webkit-hover 在safari 的兼容性问题的相关文章

iOS9中的WebKit 与 Safari带来的惊喜_IOS

每个用过 UIWebView 的iOS开发者对其诸多的限制和有限的功能也深有感触.悻然,自iOS8推出 WebKit 框架后将改变这一窘境.在本文我将会深入WebKit来体验一下它给我们带来的好处,同时也看看在iOS9中新加入的 SFSafariViewController 有些什么新的惊喜. 通用的浏览行为 所谓的通用浏览行为主要可以归纳为以下的几种: 网页载入进度 前进 后退 刷新 如果每个用到 WebView 的 app都要做一个专用的Controller也挺麻烦的,我以前就直接采用其它第

webkit博客:CSS3线性渐变样式语法

网页制作Webjx文章简介:webkit对于CSS3渐变样式语法的更新. 之前,我在前端观察发表了一篇<理解CSS3线性渐变>,相信很多同学都有研究过CSS3的渐变,大部分人都会感到纠结吧,webkit和firefox的语法有很大的不同啊.事实上,对比W3C规范,可以发现Firefox的语法更规范一些.现在好消息来了,Webkit开始优化CSS3渐变的语法了.真搞不懂当年(08年)webkit为什么采用那种写法. 具体哪种写法更优秀就不讨论了,近日webkit在其博客中介绍了渐变的新写法,新写

开发者需要了解的WebKit

Paul Irish是著名的前端开发工程师,同时他也是Chrome开发者关系团队成员,jQuery团队成员,Modernizr. Yeoman .CSS3 Please和HTML5 Boilerplate的lead developer.针对大家对WebKit的种种误解,他在自己的博客发表了<WebKit for Developers>一文,试图为大家解惑. 对许多开发者来说,WebKit就像一个黑盒.我们把HTML.CSS.JS和其他一大 堆东西丢进去,然后WebKit魔法般的以某种方式把一个

简析Chrome和Webkit的渊源

互联网的浪潮从未停息,而用以网上冲浪的冲浪板也一直在变得愈加精良.自人们进入互联网时代以来,即已经发生了三次浏览器大战.第一次浏览器大战的主角是IE和Netscape,最终IE凭借着Windows的庞大身躯推倒了Netscape;第二次浏览器大战Netscape浴火重生化身为火狐狸Firefox,一口咬了IE身上一大块肥肉;正在Firefox和IE正缠绵不息之时,突然凭空杀出个Chrome--这名出身豪门Google的小伙子一下子成长得额外精壮,上串势头凶猛,追得两位前辈娇喘吁吁. Chrome

WebKit 粗解

对一些开发者而言,WebKit就是一个黑盒子.丢进去HTML.CSS.JS等一连串的东西,而WebKit就能变魔术一般显示出一个很棒的网页出来.实际上,正我的同事IlyaGroriks提到的:   WebKit不但是白盒,而且是一个开放的白盒. 让我们花点时间来理解以下这些问题: 什么是WebKit?  什么不是WebKit?  浏览器是如何使用WebKit的?  为什么WebKit分支各不相同? 最近连Opera都转到WebKit平台上.下面的内容可以让你能够识别浏览器间的差异,去到合适的tr

开发者应当了解的WebKit知识

对一些开发者而言,WebKit就是一个黑盒子.丢进去HTML.CSS.JS等一连串的东西,而WebKit就能变魔术一般显示出一个很棒的网页出来.实际上,正我的同事IlyaGroriks提到的:   WebKit不但是白盒,而且是一个开放的白盒. 让我们花点时间来理解以下这些问题: 什么是WebKit?  什么不是WebKit?  浏览器是如何使用WebKit的?  为什么WebKit分支各不相同? 最近连Opera都转到WebKit平台上.下面的内容可以让你能够识别浏览器间的差异,去到合适的tr

CSS:移动网站开发的前端技术和技巧

网页制作Webjx文章简介:CSS:移动网站开发的前端技术和技巧. 上一篇我们谈到了移动网站中的标签,想必很多人也很想了解Mobile CSS的情况吧,本文将和大家一起探讨移动网站中的CSS标准. 介绍 Mobile css的标准也是有些复杂的,与前一篇文章中提到的类似,之前存在着一个W3C制定的CSS Mobile Profile 1.0以及OMA的WAP CSS 1.0,事实上它们都是CSS 2.1的子集,而且内容非常接近,不同的是,WAP CSS 1.0针对移动设备加入了一些扩展,这些扩展

网页制作技巧教程:了解浏览器自带开发工具

文章描述:浏览器自带开发工具你知道多少? 常规 找到开发工具 快捷方式: "F12"(Windows) "Cmd"⌘ +"Option" +"I"(Mac) 右键选择"Inspect Element 检查元素" Safari 需要在 首选项 > 高级 > 显示开发菜单,启用开发工具 Firebug 是 Firefox 扩展,需要在此安装 用最新的开发版 开发工具会不断完善,在开发版可以体验. C

HTML几个特殊的属性标签的使用介绍

在HTML中还有几个容易让我们遗忘的特殊的属性标签,下面为大家详细介绍下这几个属性在各个浏览器中的使用,为了能达到更好的兼容,建议web人员抽空看看   以下几项属性对于浏览器的兼容很不好. 1.transform:rotate(45deg) 2.border-top-left-radius 该属性允许您向元素添加圆角边框 3.border-radius 该属性允许您向元素添加圆角边框 4.box-shadow 属性向框添加一个或多个阴影 5.text-shadow 属性向文本设置阴影 6.tr