Comments on: Quick Tip – Blurring Links

By: asllearner

asllearner — Thu, 08 Jul 2010 07:18:45 +0000

just want to say thanks…this is what I really wanted, to remove it altogether. I have found many possible solutions, plugins, etd. and this is so simple it boggles the mind.

I am not breaking usability, by the way, because I am offering another signal (an image swap) whe nthe link is hovered, but the dotted line really looked awful…this is great.

By: Martin P

Martin P — Fri, 19 Mar 2010 11:43:06 +0000

$('.no-outline').mouseup(function(){this.blur()})

I used “mouseup” instead of “click” because I want to keep the outline when using the keyboard for navigation.

However, the outline still appears for a brief moment when clicking with the mouse, so I added this CSS:

.no-outline:active{ outline: none}

It works. Do you think there are any problems (accessibility/usability) with this?

By: josefk

josefk — Wed, 25 Mar 2009 19:07:21 +0000

N0 – there are accessibility issues with removing the focus from active links – you have to be really careful. This technique can strand a screen reader user, who often navigate through a page by hopping from link to link. Blurring will cause the screen reader to loose its place on the screen – and the screen reader user will have to start navigating the page all over again.

It’s really annoying – as being primarily a visual artist, those dotted lines are very ugly – but until I can loose them without loosing focus and risk compromising accessibility, I don’t feel I can use this method.

By: Development Wiki: HTML/CSS

Development Wiki: HTML/CSS — Sat, 28 Feb 2009 18:17:22 +0000

[...] http://www.learningjquery.com/2006/10/quick-tip-blur-links [...]

By: andy

andy — Wed, 11 Feb 2009 05:31:45 +0000

i have been fighting a this.blur issue with firefox that would cause another open window of firefox to come to the front when i even got near a js “a” item containing it.

your code at top of page eliminated the need for this.blur() completely…

thank you, thank you, thank you!!!

By: asdasd

asdasd — Thu, 21 Aug 2008 14:55:19 +0000

alert(‘hello’)Hello

By: iDevGeek

iDevGeek — Thu, 14 Aug 2008 19:27:37 +0000

I use the link blurring on DHTML elements which shouldn’t have the nasty box around due to their use as controls on various dynamic components.

Example as jQ plugin:
$.fn.nb = function() { return this.focus(function(){ this.blur() }); }

Use:
$('a.noblur').nb();

By: Jake

Jake — Wed, 16 Jul 2008 22:12:14 +0000

At post #2

The accesibility thing is rubbish, tab through until you get the link and IT’LL show the dotted outline ¬.¬

By: Karl

Karl — Wed, 16 Jan 2008 19:33:23 +0000

Hi Thai, look above for a link that says “click me and I won’t show the ugly dotted outline.” Click on it. That’s the demo.

By: Thai Property

Thai Property — Wed, 16 Jan 2008 14:01:39 +0000

Hi Admin,

Have any demo ? i will see your code , cuz it hard to understand jQuery Code for me

Thanks