WordPress.org

Ready to get started?Download WordPress

Forums

Remove hover from image anchors (10 posts)

  1. oriecat
    Member
    Posted 9 years ago #

    This is probably simple but I can't figure it out. I have a dashed bottom-border for hovered links. But I don't want it on images.

    I have the following in my css, but it doesn't work and I still get the dashes. What am I missing?

    a img {
    border: none;
    }

    a:hover img {
    border-bottom: none;
    }

    a:hover {
    color: #9a8;
    border-bottom:1px dashed #9999cc;
    }

    Here's the relevant post where you can see it.
    http://blog.moltenwords.net/2005/03/03/first-widelux-pics/

  2. Chyetanya Kunte
    Member
    Posted 9 years ago #

    That would be:
    img a:hover {
    text-decoration:none;
    border:0;
    }

    Notice that the element (img) is called first before the effect (a:hover).

  3. oriecat
    Member
    Posted 9 years ago #

    Thanks, but that's not working either, it still does it.

  4. oriecat
    Member
    Posted 9 years ago #

    Any other thoughts? :|

  5. Lorelle
    Member
    Posted 9 years ago #

    There are a few ways you can do this:

    a img {border:0}

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

    Any of this may work. You can try this with or without the text-decoration, but you've already (I assume) set your "a" link to NOT have text-decoration but DO have a border, so you have to get rid of the border when a link is highlighted.

    Oriecat, you have the right idea, but in this case, the link is "outside" of the img and so by having the "a" first, it kinda asks the question "okay, do this IF the next thing you encounter is an image". At least, that's the simple tale I was told when researching this same problem a few years ago. I have borders on my links and this is how I got rid of them on my images.

    It took me a long time to figure this out - It should have been so simple.

  6. oriecat
    Member
    Posted 9 years ago #

    Thanks, but I couldn't get those to work either. So I have removed at a:hover border and then added it back to the h3 and feedback where I do want it. That seems to work.

  7. NuclearMoose
    Member
    Posted 9 years ago #

    Oriecat,
    I think you were suffering from inheritance issues, or, in other words, the "cascading" aspect of Cascading Style Sheets. I had a look at your site last night, and I could not get the darn thing to work either. :\

  8. oriecat
    Member
    Posted 9 years ago #

    Thanks for trying! :)

  9. Lorelle
    Member
    Posted 9 years ago #

    Excellent, Moose. I bet it was the parent/child relationship. One of the buggers that gets us quite often. Children just don't like to listen to their parents and parents want to control their children....typical.

  10. drursi08
    Member
    Posted 7 years ago #

    I had this same problem. i couldnt figure it out either, so I removed the bit from a:hover that put a line under the link, and replaced it with a different color, so mousing over links showed a different color and made the link stand out, but images of course remained hte same.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.