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

Advertisements

6 thoughts on “Blur links with jQuery

  1. 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.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s