CODEWITHSUNDEEP
htmlcssinternet-explorerhoveropacity
a.litis
a.litis

Reputation: 443

Opacity hover effect not working correct in IE

I have this simple hover effect http://www.mysecretathens.gr/Sera/index.html

#footer ul li:hover {
opacity: 0.7;
filter: alpha(opacity=40);
 }

in the social media icons down in the footer, but in IE I see a blue-border all around each of the icons. How to fix that? Do you also see this?

Upvotes: 0

Views: 1237

Answers (4)

brush51
brush51

Reputation: 5771

if you have an link (anchor), it is the standard of internet explorer. in this case you have to reset the border with:

a { 
  border :none;
}

or 

a { 
  border :0px;
}

and for the next time, i recommend you jsfiddle where you can put easily your code to run and debug it on the site for questions here.

Upvotes: 0

Puyol
Puyol

Reputation: 3109

Add this to your css:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

Edit: add it before filter: alpha(opacity=40);

Upvotes: 0

Ahsan Khurshid
Ahsan Khurshid

Reputation: 9467

If you have a link around an image IE automatically puts a border around it.

To remove blue border Add a { border: 0 } in your CSS

Upvotes: 1

mas-designs
mas-designs

Reputation: 7536

I don't see it, but I suppose they are <a> anchor tags. So for IE you would have to add border:0px; for the anchor tags which are your social media icons.

Upvotes: 1

Related Questions