stackoverflow C...">
Geek Answers Handbook

Remove underline with jQuery

I have a link like:

HTML:

<a href="#" title=""> <img src="stack.png" alt="" title="" /> stackoverflow </a>

CSS

 a { text-decoration: underline}

I want to remove underline from image.

I tried:

 a img {text-decoration:none}

But that does not work.

BS: I can do this if I add display:block to img , but it can damage the rest of the site, nor will I add a specific class to this section.

Can I do this using jQuery?

+7
source share
7 answers

You must do this with CSS.

You can add inline style to this link:

 <a href="#" style="text-decoration:none;"> <img src=...etc /> stackoverflow </a>

Or you can add a class to this link:

 <a href="#" title="" class="img"> <img src=...etc. /> stackoverflow </a> In your css... a.img {text-decoration:none;}

EDIT:

If you cannot change the html , use jQuery:

 $('a img').parent().css('textDecoration','none')

(This is similar to the one above, but intended for the img parent - this is a - and then changes the style accordingly.)

Fiddle http://jsfiddle.net/jasongennaro/vM55K/

EDIT 2:

If this is the only child element in a , you can use this:

  $('a').children().css('textDecoration','none')

Fiddle http://jsfiddle.net/jasongennaro/vM55K/1/

+12
source

That should do it for you.

 $('a img').css('text-decoration','none')
+1
source

What about:

$ ("IMG [src =" stack.png "]) CSS. (" Text-finish "," no ");

** Edit

Is your problem adding styles to a specific element without using the rest of the DOM? Or your problem, what styles do you need to tweak to get rid of underscores?

+1
source

You can try something like this:

 $("a img").parentsUntil("a").css("text-decoration","none");
+1
source

Maybe this is a specificity problem?

Try removing borders and all the decorations with a more specific CSS selector:

 a > img { border: none; text-decoration: none; }
+1
source

You might want to use CSS: a img {border: none} or you can try setting the image to display: inline-block

0
source

I think it is better to highlight the binding for img and for text. Try the following markup:

 <a href="#" title=""><img src="stack.png" alt="" title="" /></a><a href="#" title="">stackoverflow </a>

Demo: http://jsfiddle.net/XFVMQ/

The second solution, according to my comment, is to add margin-bottom:-3px for a img .

Demo: http://jsfiddle.net/XFVMQ/

The third solution is to add outline: 3px solid white; for a img , this will override the underline, change it to the correct color.

Demo: http://jsfiddle.net/XFVMQ/6/

0
source

More articles:


All Articles