08 December 2007 ~ 3 Comments

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

3 Responses to “Blur links with jQuery”

  1. Javascript Setfocus 8 August 2008 at 1:51 am Permalink

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

  2. Edward sodspseup 18 December 2008 at 2:56 am Permalink

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

  3. EllisGL 13 May 2009 at 11:07 pm Permalink

    Thanks!


Leave a Reply