[CSS] How to combine anchor tags w/o underlining images on hover

Discussion in 'HTML' started by DC, Dec 31, 2005.

  1. DC

    DC Guest

    Given:

    a {
    text-decoration:none;
    }

    a:hover {
    text-decoration:underline;
    }


    Case #1

    <p>
    <a href="http://www.conservative.ca/">
    <img src="images/logo_cpc_e.png" />
    Conservative Party of Canada
    </a>
    </p>


    Case #2

    <p>
    <a href="http://www.conservative.ca/">
    <img src="images/logo_cpc_e.png" />
    </a>
    <a href="http://www.conservative.ca/">
    Conservative Party of Canada
    </a>
    </p>

    * markup simplified for clarity (I'm not an idiot }:O)


    PROBLEM:

    Same css for both cases. In case #1 (shared anchor tag), hover causes img to
    be underlined along with the link text. Ugly. However, in case #2, img not
    underlined on hover.

    Why?

    I don't want the unnecessary bloat from duplicating anchor tags. Can I
    achieve this with css? What am I doing wrong? I'm sure it is something
    simple but I can't suss it.

    Thanks.

    --
    DC Linux RU #1000111011000111001

    The word 'politics' is derived from the word 'poly', meaning 'many'
    and the word 'ticks', meaning 'blood sucking parasites'.
     
    DC, Dec 31, 2005
    #1
    1. Advertising

  2. DC

    Rob McAninch Guest

    DC>:

    > Same css for both cases. In case #1 (shared anchor tag), hover causes img to
    > be underlined along with the link text. Ugly. However, in case #2, img not
    > underlined on hover.
    >
    > Why?


    Hm, I don't get an underline in case 1. But the underline may not be
    visible with the image border present. You could turn off the border
    for the image, however the image will no longer be distinguished as
    a link.

    Or try styling, A:hover IMG { } in some manner.

    I can't duplicate your conditions so I'm not sure what you're seeing.

    --
    Rob McAninch
    http://rock13.com
     
    Rob McAninch, Dec 31, 2005
    #2
    1. Advertising

  3. DC

    DC Guest

    Rob McAninch wrote:
    > DC>:


    >> Same css for both cases. In case #1 (shared anchor tag), hover causes img to
    >> be underlined along with the link text. Ugly. However, in case #2, img not
    >> underlined on hover.


    >> Why?


    > Hm, I don't get an underline in case 1. But the underline may not be
    > visible with the image border present. You could turn off the border
    > for the image, however the image will no longer be distinguished as
    > a link.


    > Or try styling, A:hover IMG { } in some manner.


    Okay...

    <clickety>

    This works:

    a:hover img {
    text-decoration:none;
    }

    ....however, it apparently cannot co-exist with this:

    a:hover {
    color:#E39243;
    text-decoration:underline;
    }


    FWIW, elsewhere in my stylesheet is this:

    /******* images *******/

    img {
    border:none;
    }


    Basically, I have both text and an img inside a single anchor tag and I
    want the hover to cause the text link to be underlined but to not affect
    the img link. I'd like to not have to use two anchor tags.

    Please be gentle -- I'm just getting my feet wet again after a 2+ year
    hiatus. }:O)


    --
    DC Linux RU #1000111011000111001

    The word 'politics' is derived from the word 'poly', meaning 'many'
    and the word 'ticks', meaning 'blood sucking parasites'.
     
    DC, Jan 1, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    1
    Views:
    5,131
    Darren Kopp
    Feb 22, 2006
  2. Jochen Fuhrmann

    css: a:hover and images

    Jochen Fuhrmann, Sep 18, 2003, in forum: HTML
    Replies:
    6
    Views:
    7,184
    William Tasso
    Sep 18, 2003
  3. InteXX
    Replies:
    3
    Views:
    848
    InteXX
    Oct 14, 2009
  4. DOM Anchor Hover attribute

    , Aug 28, 2005, in forum: Javascript
    Replies:
    2
    Views:
    347
  5. Robert Oschler

    Combine HTML tags with a DOM text node element?

    Robert Oschler, Aug 29, 2005, in forum: Javascript
    Replies:
    1
    Views:
    162
    Martin Honnen
    Aug 29, 2005
Loading...

Share This Page