`

如何去掉点击链接时周围的虚线框outline属性<转>

 
阅读更多

如果全盘否定掉链接虚线框,对使用键盘的用户体验可能又是个大弊端。但这就是另外一个话题了,这里就不说了,不然就扯出UI设计和用户体验这个大话题了,我这小小的地方可说不清楚呢。

以下是解决方案:

 

方法一:
在IE下是使用html属性:hideFoucs,在HTML标签中加上hidefocus=”true” 属性即可,但这个属性是IE私有的,Firefox是不认的。

 

<href="#" hidefocus="true" title="加了hidefocus" >欢迎来到博客园(加了hidefocus属性)</a>


Firefox的处理方法比较符合标准,只需要在样式里设置a:focus{outline:none}皆可:

.xzw_test a.setFocus:focus{outline:none}

 

方法二:

 

通过javascript方法让其点击后失去焦点从而达到没有虚线框,也不失为一种曲线救国的方案:

 

1//通过判断可以指定某个必要的链接失去焦点
2if(j(this).attr("id")=="jsControl"
3  j(this).blur();

 

分享到:
评论

相关推荐

    去掉点击链接时周围的虚线框outline属性

    在网页设计中,我们经常会遇到一个细节问题,那就是当用户点击链接时,浏览器会在链接周围显示一个虚线框,这是浏览器默认的一种行为,用于突出显示当前被点击的元素。这种虚线框通常由`outline`属性控制。在某些...

    去掉超链接的虚线框

    当用户通过鼠标或触摸设备点击超链接时,大多数浏览器默认会在链接周围显示一个虚线框,这通常被称为“焦点轮廓”(focus outline)。这个设计的初衷是为了增强可访问性,帮助视觉障碍用户或使用键盘导航的用户更...

    去掉点击链接时出现的虚线框的几个方法

    在网页设计中,当用户点击一个链接时,为了提供视觉反馈,浏览器通常会在该链接周围显示一个虚线框。这种默认行为可能会在用户体验上显得不够专业,尤其是在进行精细布局设计时。因此,我们常常需要通过不同的技术...

    css 去除连接时的虚线框

    通常,当用户点击一个链接时,浏览器默认会在该链接周围显示一个虚线框,用以向用户指示哪个元素是可交互的。但这种默认的虚线框往往会影响到网页的视觉效果,特别是在设计师追求极简风格或者需要更加精细控制页面...

    css去掉链接虚框

    在网页设计中,当用户通过键盘导航(例如使用Tab键)或使用辅助技术(如屏幕阅读器)与页面交互时,浏览器默认会在可聚焦元素(如`&lt;a&gt;`标签、某些表单元素等)周围显示一个虚线边框,称为“焦点轮廓”或“虚框”。...

    css去掉点击连接时所产生的虚线边框技巧兼容符合w3c标准的浏览器

    总结来说,去除点击链接时产生的虚线边框可以使用CSS的`outline`属性,并通过设置为`none`来实现。这适用于大多数浏览器,但在IE浏览器中需要使用`hidefocus="true"`属性。在应用这些更改时,要考虑不同浏览器的兼容...

    html消除点击超链接后产生的线框

    当用户点击超链接后,在不同的浏览器中可能会出现不同的表现形式:某些浏览器会在被点击的元素周围显示一个虚线框(或实线框),这被称为“焦点样式”或“选中状态”。这种样式通常由浏览器默认设置,无法通过简单的...

    IE下target获得焦点时产生虚线问题的解决方法

    其中一个常见的问题是,当元素(通常为链接或表单控件)获得焦点时,IE浏览器会在其周围显示一条虚线边框。这种现象在其他现代浏览器中并不常见,因此在设计响应式或者跨浏览器的界面时,需要针对这个问题进行特殊...

    JS高级应用(一).pdf

    消除图片链接周围的虚线,可以通过直接设置`&lt;a&gt;`标签的样式,如`&lt;a href="#" style="outline:none"&gt;&lt;img src="test.jpg"&gt;&lt;/a&gt;`。在子窗口中刷新父窗口,使用`window.opener.location.reload()`。 获取窗口大小,...

    firefox的超链接点击去除扩大的难看虚线的解决方法

    当在Firefox中点击一个超链接时,浏览器会在链接周围显示一条虚线边框,这一现象是为了帮助用户识别当前被点击的元素,尤其对于视力有障碍或者使用键盘导航的用户来说具有一定的辅助作用。然而,这种设计并不总是...

    最全的CSS浏览器的兼容问题

    在网页中,当用户使用键盘导航或访问过链接时,默认情况下链接周围会出现一个虚线框。这种现象虽然符合无障碍设计原则,但在某些情况下可能会影响美观。解决此问题的方法有两种: 1. **IE下**: ```css a { ...

    轮廓

    - 在按钮或链接上使用轮廓,当用户点击或聚焦时,可以提供更好的反馈。 - 在表单输入框上设置轮廓,提高可访问性,帮助用户识别当前活动的输入元素。 综上所述,轮廓是CSS中一个重要的视觉元素,用于强调和区分...

    盲人站长深恶痛绝的onfocus=”this.blur()”

    “onfocus='this.blur()'”是一个JavaScript事件处理函数,它会在元素获得焦点时立即移除焦点,通常用于消除链接或按钮在获得焦点时周围的虚线边框。然而,这个技术对于使用屏幕阅读器的盲人用户来说是极其不利的。...

Global site tag (gtag.js) - Google Analytics