我有什么方法可以做到:悬停不透明浏览器?

时间:2013-10-14 23:22:01

标签: css html5 internet-explorer-8 cross-browser opacity

我试图让这个效果在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)";}

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

2 个答案:

答案 0 :(得分:1)

如果您没有正确的doc-type

问题很可能是因为在使用某些文档类型时,:hover标记之外的IE8不支持a

通常如果我想在旧版浏览器中使用悬停效果,我会使用a标记来包装元素:

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

然后使用以下内容进行定位:

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

你可能会发现不是导致问题的不透明度,如果你切换到更改另一个css属性onhover - 例如border - 如果不使用a标签它仍然无法工作。

再看一下

您的doctype似乎没问题,所以上面的说明不是问题。但是,您似乎正在使用html5标签,这也会导致您在IE8中出现问题。解决此问题的方法如下。

较早版本的Internet Explorer无法完全识别新的html5标记,但是如果您创建一个希望在JavaScript中使用的标记的单个实例,则IE开始相信标记是真实的。这通常是html5.js垫片的一部分。确保这些新标签在您的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 :(得分:0)

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