CODEWITHSUNDEEP
imagecsshyperlink
Joe Lloyd
Joe Lloyd

Reputation: 22453

remove the black underline on hover for an image link

I'm havins some difficulty with my image links in google chrome. the images get a black underline when they have been hovered over, how do i remove this I've tried

a {
   color: #000;
   &:visited {
      color: #666;
   }
   &:hover {
      outline-style:none;
      box-shadow:none;
      border-color:transparent;
   }
}

and

a {
   color: #000;
   &:visited {
      color: #666;
   }
   &:hover {
      border-style:none;
   }
}

along with loads of other things but nothing seems to work, the css does effect it but not how I want it to, Any help would really be appreciated.

Upvotes: 0

Views: 5141

Answers (2)

Joe Lloyd
Joe Lloyd

Reputation: 22453

I have also found that in rails when generating a scaffold a assets/stylesheets/scaffold.css.sass is created. this was actually the root of my problem. some default css is created in here that added the black underline in chrome, by removing this I was able to remove the black underline on my image links on hover. this default css could conflict with other styles you write so its an idea to check if there are styling conflicts with this also.

Upvotes: 1

Mohamad
Mohamad

Reputation: 35349

The underline comes from the text-decoration declaration, not the border-style one. You want to set that correctly:

a {
  color: #000;

  &:hover {
    text-decoration: none;
  }
}

It's counter intuitive because your link happens to be an image, but the declaration targets the anchor tag that wraps around your image.

Upvotes: 4

Related Questions