我正在使用站点上对象的不透明度来隐藏它,除非悬停它,并且在悬停时它会显示自己。
但是对于 Internet Explorer,这个 CSS 小技巧不起作用。以前我没有包括
filter:alpha(opacity=0);
CSS 标签。但现在 CSS 如下所示:
#title-0, #title-1, #title-2, #title-3, #title-4, #title-5, #title-6, #title-7, #title-8
{
-o-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
transition:all 0.2s linear;
zoom:1;
filter:alpha(opacity=0);
opacity: 0.0;
}
悬停时
#portfolio-0:hover > #title-0, #portfolio-1:hover > #title-1, #portfolio-2:hover > #title-2, #portfolio-3:hover > #title-3, #portfolio-4:hover > #title-4, #portfolio-5:hover > #title-5, #portfolio-6:hover > #title-6, #portfolio-7:hover > #title-7, #portfolio-8:hover > #title-8
{
opacity:1.0;
zoom:1;
filter:alpha(opacity=100);
}
我缺少什么重要的东西吗?
感谢所有帮助,据我测试,除 IE 外,这在所有主流浏览器中都能完美运行
////* 更新 *////
好的,根据到目前为止的精彩回答,这就是我将“NOT-HOVERED”CSS 更改为的内容,除非图像悬停,否则这应该隐藏标题。
#title-0, #title-1, #title-2, #title-3, #title-4, #title-5, #title-6, #title-7, #title-8
{
-o-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
transition:all 0.2s linear;
zoom:1;
filter:alpha(opacity=0);
opacity: 0.1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
<!--[if IE]>
opacity: 0.01;
<![endif]-->
}
但我试图隐藏的对象仍然显示:/
最佳答案
您要迎合哪个版本的 IE?
http://css-tricks.com/snippets/css/cross-browser-opacity/
这个网站应该会给你答案,看看这行:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
显然将悬停时的不透明度值更改为 (Opacity=100)
同样在你的悬停中你有
filter:alpha(opacity=0);
应该是
filter:alpha(opacity=100);
关于css - Internet Explorer 透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22917236/