Question

此代码不适用于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>

Answer 1

我认为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

Answer 2

你应该避免过滤器，它不适合你。另外，对我来说，.imgDescription内的图片不喜欢被链接到。

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

IE 7,8（使用IE 9渲染）工作正常（虽然IE 7的.imgDescription定位不佳，但它仍然可以正常工作。

http://jsfiddle.net/7Jvcy/

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

div

Answer 3

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

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

或者你可以试试HTML5 doctype：

<!DOCTYPE html>

这段代码不适用于ie（悬停到显示元素）

3 个答案: