ansaurus

Question

Answer 1

+1 A:

<a href="#" style="text-decoration:none;">
     <span style="text-decoration:underline;">one</span>  
    two
    <img src="img.png" style="border:0px; text-decoration:none;"> three
</a>

I think it can only be possible using javascript as follows.

LOOK FOLLOWING EXAMPLE

<html>
<head></head>
  <style>
    a{
       text-decoration:none;
     }

    a:hover
     {
       text-decoration:none;
     }

    .sample
     {
        text-decoration:underline;
     }

    .sample_none
     {
        text-decoration:none;
     }
   </style>
   <script type="text/javascript">
      function show_underline(){
        document.getElementById('sample').className= 'sample';
      }

      function hide_underline(){
        document.getElementById('sample').className= 'sample_none';
      }
   </script>
    <a href="#" onmouseover="show_underline();" onmouseout="hide_underline();"> <span id="sample" class="sample_none">two</span>  
    <img src="img.png" style="border:0px;"> three
    </a>


</body>
</html>

P.S. I would like to know if it is possible with css and html only

Salil 2010-06-04 07:40:02

This will force the underline to be on all the time. And if I make a special class to handle the hovering, it will break up the contiguous link.

Biggles 2010-06-04 08:00:55

please paste your code after you done it. I would like to know how you handle the hovering. neways Really Good Question :)

Salil 2010-06-04 08:04:49

Salil: Upon further testing I discovered that it didnnot solve my problem.

Biggles 2010-06-04 08:05:47

check my example that uses javascript.

Salil 2010-06-04 09:30:07

Your example works, but only for one "text part", since it uses an id to find the text to underline. Also, it seems a bit complex for such a simple thing.

Biggles 2010-06-04 10:00:02

Answer 2

+2 A:

a, a:hover { text-decoration: underline; }
a img, a:hover img { text-decoration: none !important; }

eyelidlessness 2010-06-04 08:28:25

how can i do if i want underline on three and not on two after hover?

Salil 2010-06-04 08:37:40

Styles: a, a:hover { text-decoration: underline; }a img, a:hover img, span.two { text-decoration: none !important; border: 0; } and markup: <a href="#">one <span class="two">two</span> <img src="img.png"> three</a>

eyelidlessness 2010-06-04 08:41:54

Can't get any of these to work. The image is still underlined.

Biggles 2010-06-04 08:55:02

also not for me...........

Salil 2010-06-04 09:25:22

Answer 3

A:

What I really wanted was to have an image "attached" to links, without it getting underlined on hover. Here is a solution I came up with:

<a href="#" style="background:url('pic.png') no-repeat; background-position: left center; padding-left: 20px;">Link</a>

padding-left is for offsetting the text so it does not overlap the image.
With background-position you can move the image to make it better aligned with the text.
If the image is higher than the text padding-top and padding-bottom can be used to tweak the appearance.

This technique can also be used with CSS sprites like this:

<a href="#" style="background:url('sprites.png') no-repeat; background-position: -16px -16px; padding-left: 32px;">Link</a>

I used a similar technique to use CSS sprites instead of ordinary inline images:

<span style="background:url('sprites.png') no-repeat; background-position: -16px -16px; padding-left: 32px;"></span>

Hope this helps someone

Biggles 2010-07-09 12:57:19

ansaurus

tags:

views:

answers:

CSS: Skip underline in part of link

related questions