zoukankan      html  css  js  c++  java
  • css去掉a标签点击后的虚线框,outline,this.blur()

    css去掉a标签点击后的虚线框,outline,this.blur()

    outline是css3的一个属性,用的很少。
    声明,这是个不能兼容的css属性,在ie6、ie7、遨游浏览器都不兼容。

    outline控制的到底是什么呢?
    当聚焦a标签的时候,在a标签的区域周围会有一个虚线的框,这个框不同于border的是,它是不占有任何宽度的。当你取消焦点的时候,这个虚线框就会自然消失。
    你可以通过遨游、火狐或者ie的几个版本看到。而safari、opera、goole浏览器等本身就不支持这个效果,所以看不到。
    这个就是a标签被聚焦后出现了虚线框,也就是outline;
    基本上这个是没有用的效果,大多数情况下我们会希望不要出现这种效果,于是给a标签设置outline:none;
    很遗憾的是,ie6、7和遨游浏览器里都不能实现,只有ff,ie8在加了outline:none后会取消聚焦的虚线框。
    所以我说这个Outline属性基本就是一个费属性。

    怎么样才能取消这个虚线框呢?常用方法有三种:
    1:在a标签里加入js控制,当a标签被聚焦时,强制取消焦点,这时候a标签自然不会有虚线框。
    <a href="#" onfocus="this.blur();">测试</a>
    这里设置聚焦时触发blur();强制取消焦点。自然是屡试不爽。

    2:在a标签里嵌套其他标签,比如span等,把内容放在被嵌套的标签里。这时候点击这个链接,聚焦的是a的子标签,自然不会聚焦在a标签上,所以也能避免这个问题。

    3:不适用a标签做链接,采用其他标签,使用js做出hover的效果,在css里加入cursour:pointer;设置鼠标以上时变小手。给用户是链接的错觉。
    使用js做点击时的页面跳转等。最大的缺点是对seo友好性比前两种差很多。

    这三种方法的共同点是比较麻烦,相比较而言,推荐第一种,第二第三也视不同的情况而定。也是会用到的。

    我认为outline的这个效果时浏览器迟早要取消掉的,所以关于这个属性的知识也相当的鸡肋。
    或者还可以在css中加入.xxx a{outline:none;blr:expression(this.onFocus=this.blur());}
    (注:直接放全局a或者body a 还是控制不了的,需要放到具体样式下的a标签才能控制)
    实例:
    .login-tabs li a{
    text-decoration: none;
    outline:none;
    blr:expression(this.onFocus=this.blur());
    }
    =======================================
    1:在a标签里加入js控制,当a标签被聚焦时,强制取消焦点,这时候a标签自然不会有虚线框。
    <a href="#" onfocus="this.blur();">测试</a>
    2:在a标签里嵌套其他标签,比如span等,把内容放在被嵌套的标签里。这时候点击这个链接,聚焦的是a的子标签,自然不会聚焦在a标签上,所以也能避免这个问题。
    3:不适用a标签做链接,采用其他标签,使用js做出hover的效果。
    4.在css中加入.xxx a{outline:none;blr:expression(this.onFocus=this.blur());}

    上面几种解决办法根据需求选择,建议使用最后一种比较方便

  • 相关阅读:
    docker容器跨服务器的迁移的方法
    Docker 更改镜像存储位置
    将Docker容器转移至另一服务器
    docker容器存放目录磁盘空间满了,转移数据修改Docker默认存储位置
    在线|二轮辅导[06][三角函数+解三角形02]
    在线|二轮辅导[05][三角函数+解三角形01]
    推荐|网络画板2D学习笔记
    推荐|网络画板3D学习笔记
    导数法求函数最值
    在线|二轮辅导[04][函数与导数02]
  • 原文地址:https://www.cnblogs.com/zdz8207/p/css3-outline-blur.html
Copyright © 2011-2022 走看看