[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, Dec 31, 2005
    #1
    1. Advertisements

  2. DC

    Rob McAninch Guest

    DC>:
    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, Dec 31, 2005
    #2
    1. Advertisements

  3. DC

    DC Guest

    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, Jan 1, 2006
    #3
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.