outline:none || hidefocus=true || onfocus=this.blur();
hideFocus即隐藏聚焦,具有使对象聚焦失效的功能,其功能相当于: onFocus="this.blur()" 它的值是一个布尔值,如hideFocus=true。也可省略赋值直接写hideFocus。 你给的代码如果没有hideFocus,那么鼠标点击该超链接,则外面出现一个虚线框,即为聚焦。而使用了hideFocus则不会有虚线框。 在IE下,需要在标签 a 的结构中加入 hidefocus="true" 属性。即: <a href="#" hidefocus="true" title="xx">xx</a> 而在FF等浏览器中则相对比较容易,直接给标签 a 定义样式 outline:none; 就可以了,即:a { outline:none;} 顺便查了一下outline的用法:
outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
注释:轮廓线不会占据空间,也不一定是矩形。
outline 简写属性在一个声明中设置所有的轮廓属性。
可以按顺序设置如下属性:
- outline-color
- outline-style
- outline-width
如果不设置其中的某个值,也不会出问题,比如 outline:solid #ff0000; 也是允许的。
在前端制作的过程中会发现,一些文字/图片链接,或者一些input控件,在点击时会在周围出现虚线边框,一般会在火狐和IE浏览器下出现虚线框,谷歌下不会有。
这些虚线边框是作为对视觉设计的一种辅助,在不使用鼠标,而用键盘Tab键进行页面浏览时,会标示出当前所在的链接或控件的位置,便于浏览。这对那些视觉有障碍的人士来说更是必不可少的。
但是有些时候我们却不想使用它们,因为浏览器对虚线框的解析有差异,并且不规则,所以在视觉设计上反而成为了某种缺陷。所以这种时候,我们想要禁用这些虚线边框,使浏览者的视觉享受能够完美无瑕。
纯CSS去掉超链接或按钮点击时出现的虚线边框
<style type="text/css">
a,input,button{ outline:none; }
::-moz-focus-inner{border:0px;}
</style>
</head>
<body>
<a href="http://www.admin10000.com" target="_blank"><img src="http://www.admin10000.com/skin/logo.jpg" border="0"></a>
<a href="http://www.admin10000.com" target="_blank">admin10000.com</a>
<input type="button" value="admin10000.com"/>
<button>admin10000.com</button>
</body>
从以上代码可以看出,可以通过设置CSS属性outline解决。
FF存在bug,其中input,button标签通过私有属性::-moz-focus-inner特别处理
以上方法在IE6、IE7下无效。可使用 onfocus 属性解决,如下:
<a href="http://www.admin10000.com" target="_blank" οnfοcus="this.blur()">admin10000.com</a>
使用jquery方法只需一句,非常简单,支持所有浏览器
$("a,input,button").focus(function(){this.blur()})
综上所述:
兼容所有浏览器方法:
<style type="text/css">
a,input,button{ outline:none; }
::-moz-focus-inner{border:0px;}
</style>
<a href="#" hidefocus="true" title="xx">xx</a>
outline:none || hidefocus=true || onfocus=this.blur();相关推荐
- html hidefocus=“true“
html hidefocus="true" 最近学到html,看到别人写的代码带hidefocus="true",查了一下是使超链接不显示周围的虚线. hide ...
- html hidefocus=true
最近学到html,看到别人写的代码带hidefocus="true",查了一下是使超链接不显示周围的虚线. hideFocus即隐藏聚焦,具有使对象聚焦失效的功能,其功能相当于: ...
- a标签中 href=/ 和 hideFocus=true
一:href="/" 连接到根目录 这是相对路径的根目录表示方法 可以写为 http://class.qq.com/" rel="nofollow"& ...
- blr:expression(this.onFocus=this.blur())
blr没有特殊意思,expression 条件,这句话的意思是链接 a 在获得焦点的同时失去焦点.如果你用的是图片链接什么的,他不会显示周边的虚线. 楼下的朋友,有三点需要重申一下 1.按下鼠标图片周 ...
- behavior:expression((this.hideFocus=true) (this.behavior='none'));
这种写法可以避免expression多次运行,确实不错,学习了. 然后多加上一个非IE下的清除虚线框的css就是: { outline: none; }
- div,span等标签支持focus/blur事件
<div tabindex="0" hidefocus="true" onfocus='alert("得到焦点");' onblur= ...
- html清理超链接前面的黑点,吹毛求疵:解决IE6-7给链接加黑点边框的三种方案
先定义问题:大家都知道,CSS超链接的outline属性一直是为键盘用户增加易用性的好帮手(按Tab键focus下一条链接,是除Safari Win外的默认操作).可以说,outline通常伴随着:f ...
- jquery简单实现点击弹出层效果实例
先看效果图: 完整例子: <!-- 渐变弹出层 --> <div id="race"><a href="#">点击</ ...
- 1-practice之Python爬取度娘页面
1.获取需求 from urllib import request 2.根据需求,寻找网站 url = 'http://www.baidu.com' 3.将网站数据获取到本地 req = reques ...
最新文章
- 黑客提交漏洞先获感谢后被举报 网络安全行业或现标志性事件
- 外媒:英国索尔兹伯里事件中受伤警察已重返工作
- TCP/IP状态详解
- android108 内存分配
- 07 | 案例篇:系统中出现大量不可中断进程和僵尸进程怎么办?(上)
- Beyond Compare 3.3.8 build 16340 + Key
- python可以实现操作系统管理_Python并发编程 —— 操作系统基础
- CCNA-第十四篇-NAT-下+链路聚合(LACP)+DHCP
- CentOS6.4安装包初识
- 【LeetCode笔记】312. 戳气球(Java、动态规划)
- HyperLPR Python3车牌识别系统的入门使用
- Eclipse中安装TestNG插件
- 多个ORACLE HOME时的程序连接
- 阿里云服务器下安装LAMP环境(CentOS Linux 6.3)(1)
- python面向对象——类(上)
- EDI系统都有哪些版本,有何特点?
- 【C语言】【笔记】ASCII码值表;常用转义字符表
- 空间分析方法在计算机上的应用,常见的空间分析方法(很经典的总结)
- 在家用手机兼职稳定收入,三种实战方法
- Paper reading
热门文章
- 将自己的姓氏用星号c语言,姓名显示最后一字其他替换成星号
- 索尼手机刷twrp教程
- 安装jdk过程中报错1335缺少cda文件
- 途牛最新财报再亏5.6亿,步子太大总会扯到蛋
- HDU 1847 Good Luck in CET-4 Everybody
- MySQL学习Day01(狂神说Java)
- 批量拆分WORD文件,批量合并WORD文件
- 运行rqt tf时的报错:ParserError: while parsing a block mapping
- 按键精灵Introduce
- Object.freeze() 的使用