为什么悬停功能只在部分电脑上有效？

Question

我有一个简单的悬停功能，可以使图像更透明。我正在尝试在 IE 11 上使用该网站。奇怪的是，在某些计算机上，它可以正常工作。在其他人也运行 IE 11，它没有。我不知道这是代码问题还是只是设置问题。有什么想法吗？

这是我的图片代码：

<img alt="Home" class="auto-style8" src="http://contoso/AzureTeam/Images/Home.png">

这是我的 css:

.auto-style8 {

        width: 150px;
        height: 150px;
    }
 .auto-style8:hover {
         opacity: 0.4
    }

也没什么特别的。我不太明白哪里出了问题。

Answer 1

尝试使用 css 跨浏览器前缀

例如这样：

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

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;

Answer 2

您确定所有计算机都使用相同版本的 IE 11 吗？我遇到了类似的问题。

您可以尝试通过这样做来涵盖所有基础：

 .auto-style8:hover {
     -webkit-opacity: 0.4;
     -khtml-opacity: 0.4;
     -moz-opacity: 0.4;
     -ms-opacity: 0.4;
     -o-opacity:0.4;
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
     filter: alpha(opacity=40);
 }

查看：http://www.w3schools.com/css/css_image_transparency.asp

Answer 3

关于 CSS 浏览器支持：不透明度属性适用于以下浏览器版本。

不透明度:

IE: 9
火狐：2
Chrome: 4
野生动物园：3.1
歌剧：9

可能在某些电脑上，IE版本比9旧。

并且您应该始终使用供应商前缀：

webkit-（Chrome、Safari、更新版本的 Opera。）
moz- (Firefox)
o-（Opera 的旧版本）
毫秒- (Internet Explorer)

如果您可以访问您的代码无法运行的计算机，您还可以尝试删除该计算机的缓存。

按 F12 > 网络 > F5 > 右键单击 > 清除浏览器缓存

Answer 4

在 IE6 中：悬停仅应用于 HTML 具有 href 属性的元素。

在 IE7 中：悬停在锚点以外的元素上通常反应很慢。在大型表上，这几乎无法使用。一种解决方法是向悬停的元素添加相对位置（假设元素未定位）。

在 Internet Explorer 版本 8 中，与 :hover

结合使用时，对具有负 z-index 的元素的操作存在错误

为什么悬停功能只在部分电脑上有效？

Why is hover function only working on some computers?

html

css

hover

internet-explorer-11