Blur links with jQuery

While surfing the Web, you probably noticed the dotted outline, that appears when you click on the link. If your link doesn’t lead to another page, but instead triggers some event in the same page, outline stays there and looks ugly.

For modern browsers you can remove it with simple css:

a:focus, a:active {
  outline:none;
}

Unfortunately, this won’t do for IE 6 and earlier.

With jQuery it’s easy to get rid of the outline in every browser that has JavaScript enabled:

$("a").click(function() {
  $(this).blur();
});

This will remove outline from the link once he is clicked. You will see the outline when clicking, but it will not stay there.

If you don’t want to se the outline at all replace click event with focus event:

$("a").focus(function() {
  $(this).blur();
});

To find more about jQuery Events visit http://docs.jquery.com/Events

6 thoughts on “Blur links with jQuery”

I found your site on faves.com bookmarking site.. I like it ..gave it a fave for you..ill be checking back later

Reply ↓

Very usefull post.
Thanks.
P.S. I like your writing style.

Reply ↓

Thanks!

Reply ↓

I recommend the second option on this post. The other two do not take into account accessibility standards for environment with only keyboards.

If you remove the outline completely, you cannot navigate through links by using the ‘Tab’ key, since you don’t know where you are. By removing on “click” event, you allow navigation using ‘Tabs’ and also leave your page looking as you designed it.

Great post.

Reply ↓