CODEWITHSUNDEEP
html
Pomster
Pomster

Reputation: 15197

How to remove the grey highlight of a link Image?

I have added a Image as a link on my MVC4 website and when i hover over the image a nasty grey highlight appears, is there a way to remove it?

Here is my code below:

<div class="float-left">
  <p>  
    <a href="@Url.Action('Index')">
      <img alt="HomePage" style="verticalalign:middle;" height="30px" src="~/Images/formvalue_logo.png"> 
    </a> 
  </p>
</div>

enter image description here

Thanks in advance.

Upvotes: 0

Views: 932

Answers (2)

MassivePenguin
MassivePenguin

Reputation: 3711

a img, a img:hover { background-image: none; background-color: transparent; }

might fix your problem... if not, try:

a:hover img, a img:hover { background-image: none; background-color: transparent; }

If that doesn't do the trick, then the background is on the 'a' tag rather than the image, and you'll need to do this:

a { background-image: none; background-color: transparent; }

although this will affect every link on the page, so it might be better to put a class on the link (e.g. myClass), and style using that:

a.myClass, a.myClass img, a.myClass img:hover { background-image: none; background-colour: transparent; }

Upvotes: 0

Dipak
Dipak

Reputation: 12190

Try - 

.float-left img:hover, .float-left a:hover{
  background: none;
  background-color: transparent;
}

Upvotes: 3

Related Questions