Css 有没有什么方法可以在浏览器中创建:悬停不透明度?
我试图在IE8中实现这种效果,但似乎找不到好的解决方案 你有什么想法吗 我尝试添加:Css 有没有什么方法可以在浏览器中创建:悬停不透明度?,css,html,internet-explorer-8,cross-browser,opacity,Css,Html,Internet Explorer 8,Cross Browser,Opacity,我试图在IE8中实现这种效果,但似乎找不到好的解决方案 你有什么想法吗 我尝试添加: .image { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";} .box:hover .image { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";} 但这似乎不适用于悬停…这是我在我的网站上使用的,我从来没有遇到过任何浏览器的问
.image {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";}
.box:hover .image {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
但这似乎不适用于悬停…这是我在我的网站上使用的,我从来没有遇到过任何浏览器的问题,包括IE的旧版本:
{filter:Alpha(opacity=80);opacity:.8;-moz opacity:.8;}
如果您没有正确的文档类型
问题很可能是由于:当使用某些文档类型时,IE8在a
标记之外不支持悬停
通常,如果我想在旧浏览器中使用悬停效果,我会使用a
标记来包装元素:
<a href="#"><img /></a>
您可能会发现,造成问题的不是不透明度,如果您切换到更改另一个css属性onhover(比如border),如果不使用a
标记,它仍然无法工作
再看一眼
看起来您的doctype还可以,所以上面的注释不是问题所在。然而,您似乎正在使用html5标签,这也会导致IE8出现问题。解决方法如下
旧版本的Internet Explorer不能完全识别新的html5标记,但是如果您创建了希望在JavaScript中使用的标记的单个实例,IE开始相信这些标记是真实的。这通常是垫片工作的一部分。确保这些新标记在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>
我希望您的实际代码中有.box:hover.image
。你的.image
有布局吗?哦,是的,我没有注意到这里的点,我不知道你问的是什么意思。image有布局。你有css属性设置吗?如果是,什么?溢出:隐藏;显示:块;位置:相对位置;图右下方的小提琴看起来很像一幅图像。你能试着设置。最小宽度:0代码>,看看它是否有效?这个有效!谢谢,我还注意到另一个问题。。。我把不透明度设置为1而不是100。。。再次感谢你@用户149323啊没问题,呵呵。是的,我已经做过几次了。。。当0到1的不透明度看起来非常正常时,几乎不可能发现错误:)
<!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>