有什么办法可以制作 :hover opacity 跨浏览器吗？答案

【问题标题】：Is there any way I can make a :hover opacity cross browser?有什么办法可以制作 :hover opacity 跨浏览器吗？
【发布时间】：2013-10-14 23:22:01
【问题描述】：

我正在尝试让这个效果在 IE8 中工作，但似乎找不到好的解决方案。

http://jsfiddle.net/aarhG/2/

有什么想法吗？

我已经尝试添加：

.image {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}

.box:hover .image {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}

但这似乎不适用于悬停...

【问题讨论】：

我希望您的实际代码中有.box:hover .image。你的.image 有布局吗？
哦，是的，我错过了这里的点，当您询问 .image 是否有布局时，我不确定我是否明白您的意思。
你是否设置了任何 css 属性？如果有，是什么？
溢出：隐藏；显示：块；位置：相对；它看起来很像图下方的小提琴是图像。
您可以尝试将.min-width:0; 设置为该值，看看是否有效？

标签： css html internet-explorer-8 cross-browser opacity

【解决方案1】：

如果您没有正确的文档类型

问题很可能归结为:hover 在使用某些文档类型时在a 标记之外的IE8 中不受支持。

一般来说，如果我想在旧版浏览器中实现悬停效果，我会使用 a 标记来包装元素：

<a href="#"><img /></a>

然后使用以下方法定位：

a:hover img { opacity: 0.5; filter: Alpha(opacity=50); }

如果您切换到更改另一个 css 属性 onhover（例如边框），您可能会发现不是不透明度导致问题，如果不使用 a 标记，它仍然无法工作。

再看一遍

看来您的 doctype 没问题，所以上面的注释不是问题。但是，您似乎正在使用 html5 标签，这也会导致您在 IE8 中出现问题。对此的修复如下。

旧版本的 Internet Explorer 不能完全识别新的 html5 标签，但是如果您创建希望在 JavaScript 中使用的标签的单个实例，IE 开始认为这些标签是真实的。这通常是html5.js shim 的一部分。确保这些新标签在您的 CSS 中显示为块也是一个好主意。

<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<title> Opacity IE8 </title>
<style>
.container {
  display: block;
  position: relative;
}
.container .box {
  display: block;
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  opacity: 0;
  filter: Alpha(opacity=0);
}
.container:hover .box {
  opacity: 1;
  filter: Alpha(opacity=100);
}
</style> 
<script>
  document.createElement('figure');
  document.createElement('figcaption');
</script>
</head>
<body>
  <figure class="container">
    hover me
    <figcaption class="box">
      <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </figcaption>
  </figure>
</body>
</html>

【讨论】：

这成功了！谢谢，我还注意到另一个问题...我将不透明度设置为 1 而不是 100...呵呵，再次感谢！
@user1493230 啊没问题，呵呵。是的，我已经做过几次了......当 0 到 1 的不透明度看起来完全正常时，几乎不可能发现错误:)

【解决方案2】：

这是我在我的网站中使用的，我在使用任何浏览器时都没有遇到任何问题，包括旧版本的 IE：{ filter: Alpha(opacity=80); opacity: .8; -moz-opacity: .8; }。

【讨论】：