Skip to main content

Remove Underline/Border On Image Links

By November 24, 2015Blog, 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.

 

allure

Author allure

More posts by allure

Leave a Reply

Designed by

best down free | web phu nu so | toc dep 2017