Remove Underline/Border On Image Links

By November 24, 2015March 20th, 2017Blog, Snippets
Allure Web Solutions Code Snippet

Often in our projects we want to set default hover behavior for links. We would do this with CSS like so:

a { text-decoration: none; }
a:hover { text-decoration: underline; }
/* OR: border-bottom: 1px solid black; */

The frustrating thing about this CSS is that the underline or border on hover applies to all types of links, including linked images.

Unfortunately, CSS doesn’t have a standard yet for selecting parent elements. If it did the easy way to target a parent selector and turning off the underline for image links would look something like this:

a < img { border-bottom: none; }

OR

a img:parent { border-bottom: none; }

Currently the best solution comes to us with jQuery:

jQuery(document).ready(function($) {
    $('a img').parent().css('border-bottom','none');
});

What we’re doing in this code is selected all img tags wrapped in an a tag and then using the parent() function to select the wrapping a tag. Then we use the css() function to remove the border on the parent a tag.

 

Mike Doubintchik

Author Mike Doubintchik

More posts by Mike Doubintchik

Leave a Reply