此代码在 ie 中不起作用（悬停以显示元素）答案

【问题标题】：this code not work in ie ( hover to show element )此代码在 ie 中不起作用（悬停以显示元素）
【发布时间】：2013-12-18 06:57:42
【问题描述】：

此代码在 ie 中不起作用（悬停显示元素）

请帮我了解一下 CSS，谢谢。

<style type="text/css">
body {
  font: 14px/1.4 arial;
}
.imgWrap {
  position: relative;
  width: 140px;
  height: 112px;
}
.imgDescription {
  margin-top: -90px;
  margin-left: 144px;
  width: 728px;
  height: 90px;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  -moz-opacity: 0.00;
  filter: alpha(opacity=0);
}
.imgWrap:hover .imgDescription {
  visibility: visible;
  opacity: 1;
  -moz-opacity: 1.00;
  filter: alpha(opacity=100);
}
</style>

<div class="imgWrap">
  <img src="http://3.envato-static.com/assets/header-footer/microlancer/web-development-services-e546173320569b008737e36c59b25782.jpg" alt="polaroid" />
  <div class="imgDescription"><img src="http://static.adzerk.net/Advertisers/d893babe671c41118c1fece177e0a21a.jpg"/></div>
</div>

【问题讨论】：

什么版本的IE？什么不完全有效？
我不相信 IE7/8 支持 -moz-opacity（甚至可能更新）
您应该始终将标准属性放在供应商前缀之后。因此不透明度：0；应该出现在之后 -moz-opacity: 0.00;和不透明度：1；在-moz-不透明度之后：1.00；您还可以在 imgDescription 样式上拥有绝对位置，而无需提供位置，即顶部和左侧属性。我建议您将其删除，因为我已经看到浏览器错误丢失了一个，不要介意两者 - 反正它什么也没做。

标签： css

【解决方案1】：

您应该避免使用过滤器，它不适合您。另外，对我来说，.imgDescription 中的那个图片不喜欢被链接到。

我删除了所有不透明度和过滤器信息（如果您有绝对定位的具有隐藏可见性的项目，则不需要它）并更改了 .imgDescription 的 background-color，以便您可以看到它有效。

IE 7、8（使用 IE 9 渲染）工作正常（虽然 IE 7 对 div 的定位很差，但它仍然可以工作。

http://jsfiddle.net/7Jvcy/

在 IE 7 和 8 中测试输出：http://fiddle.jshell.net/7Jvcy/show/

.imgDescription {
  margin-top: -90px;
  margin-left: 144px;
  width: 728px;
  height: 90px;
  position: absolute;
  visibility: hidden;
    background-color: #f00;
}
.imgWrap:hover .imgDescription {
  visibility: visible;
}

【讨论】：

您可以使用opacity，但使用Microsoft filter 似乎会破坏IE 7 和8。

【解决方案2】：

我认为 IE 在将样式应用于元类的子类方面存在一些问题。你可以用一个js，也许只针对IE，也能达到同样的效果。

javascript（需要 jQuery）：

jQuery('.imgWrap').hover(function () {
  jQuery(this).addClass('hover');
}, function () {
  jQuery(this).removeClass('hover');
});

改变的css：

.imgWrap:hover .imgDescription,  .imgWrap.hover .imgDescription
{
visibility: visible;
opacity: 1;
-moz-opacity: 1.00;
filter: alpha(opacity=100);
}

Example

【讨论】：

【解决方案3】：

您可以将 HTML4.1 文档类型添加到您的 HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

或者你可以试试 HTML5 文档类型：

<!DOCTYPE html>

【讨论】：

:hover 自 Internet Explorer 7 起已支持非链接元素 - 请参阅 developer.mozilla.org/en-US/docs/Web/CSS/:hover。更重要的是，我不确定应该如何更改文档类型来增加对浏览器的支持？
@pwdst Well it had worked for other people
这不是您在原始答案或编辑答案中所说的。如果你说确保你有一个文档类型并且它在第一行before 任何空格，那么我不会投反对票。相反，您建议将文档类型更改为 HTML 4 并（最初）引用不正确的信息。反对票成立。