Cannot remove img border and hover bg color from image links

  • The Share & Follow icon links as well as the Book Jacket image links that were brought in from an old Typepad blog have dotted bottom borders and background colors on hover. I have tried numerous ways to get rid of the image styling but can’t seem to make it go away.

    a img {border:none; outline:none; text-decoration:none; }
.post a img {border: 0px solid #000;}
.post a:hover img {border-color: none;}

    https://everydayiwritethebookblog.com/
    Here is the original CSS declaration for the links I DO want to show the styles:

    /* Links */

a{color:#335B60; text-decoration:none; outline:none}
a:hover{background:#D9E9EA; color:#335b60; text-decoration:none; outline:0}
a img, :link img, :visited img, {border:none !important; outline:none !important; text-decoration:none !important; }
a img {border:none !important; outline:none !important; text-decoration:none !important; }

    Any suggestions?
    Thanks so much

Viewing 7 replies - 1 through 7 (of 7 total)

  • Looks like the dotted border is coming from

    .entry-content a { border-bottom: dotted 1px #583c7b; }

    on line 134 of your stylesheet. The background color on hover is from

    .entry-content a:hover { background: #D9E9EA; }

    on line 137.

    Thread Starter Sam

    (@lt1833)

    I do want the text links in .entry-content to have these effects…So:

    .entry-content a img { border-bottom: none; }
    .entry-content a:hover img{ background: none; }?

    THANKS FOR YOUR HELP!

    Try using Firefox with the Firebug add-on for this kind of CSS work.
    https://getfirebug.com/

    .entry-content .shareinpost a {
border-bottom:none;
}

    Your problem solved..

    also add background: none;

    Thread Starter Sam

    (@lt1833)

    Thank you everyone!! Pankaj–that worked for the Share & Follow icons. Thanks SO MUCH.

    But most of the images (not the first 2) within the posts and in the sidebar widgets are still showing a border bottom and background color on hover. (no border in widgets) And I just can’t figure out how to get rid of them.

    .entry-content img a {
border-bottom:none;
}

    does nothing.
    Any suggestions greatly appreciated.

    Jorge

    (@jledesmaddsgmailcom)

    I have the same problem at this test site here: test site

    If you hover over the images, notice how the border at the bottom displays the red line. I’m aware I’ve chosen this style for the regular a links across the site but I can’t seem get this working at all:

    I’ve tried these codes to no avail

    a img {border:none; }

    a img {
border: none !important;
text-decoration: none !important;
}
    .entry a img { border-bottom: none; }
.entry a:hover img{ background: none; }

    Pretty please anyone.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Cannot remove img border and hover bg color from image links’ is closed to new replies.