• 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.
    https://blog.moltenwords.net/2005/03/03/first-widelux-pics/

Viewing 9 replies - 1 through 9 (of 9 total)
  • That would be:
    img a:hover {
    text-decoration:none;
    border:0;
    }

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

    Thread Starter oriecat

    (@oriecat)

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

    Thread Starter oriecat

    (@oriecat)

    Any other thoughts? ??

    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.

    Thread Starter oriecat

    (@oriecat)

    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.

    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. :\

    Thread Starter oriecat

    (@oriecat)

    Thanks for trying! ??

    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.

    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.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Remove hover from image anchors’ is closed to new replies.