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.
