我正在尝试使用 CSS 过渡使背景图像在您将鼠标悬停在菜单上时淡入。我希望它需要大约 2 秒的时间来淡化它。 它在 Firefox 中完美运行,但在所有其他浏览器上它只是立即出现。在 IE 中它根本不起作用,但我并不担心,因为我从没想过它会起作用。
CSS 布局
.mainmenu ul li{
height: 86px;
display: inline-block;
margin: 0;
padding: 0;
z-index:1000;
position: relative;
}
.mainmenu li:after{
content: "";
opacity: 0;
-webkit-transition: opacity 1.5s;
-moz-transition: opacity 1.5s;
-o-transition: opacity 1.5s;
-ms-transition: opacity 1.5s;
transition: opacity 1.5s;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
}
.mainmenu li:hover:after{
opacity: 1;
}
CSS 外观
.mainmenu li:after{
background: url(../images/hover.png) no-repeat center bottom;
}
HTML
<div class="mainmenu"><ul><li><a href=''>Home</a></li><li><a href=''>About Us</a></li><li><a href=''>Contact Us</a></li><li><a href=''>Blog</a></li><li><a href=''>Gallery</a></li></ul></div>
有人可以帮忙吗?除了 IE 之外,它确实可以使图像出现,但在 Chrome、Safari 和 Opera 上工作时淡入淡出会很好。如果那时我能让它工作,我什至可以考虑 IE。
最佳答案
正如@Tyriar 所说,对生成内容的转换/动画的支持是不完整的。它适用于最新的 Chrome Canary(版本 27.0.1444.3),因此很快就会出现在常规 channel 中。届时,IE10、Firefox 4+ 和 Chrome 将支持它。 Safari 有一个明显的异常(exception)(和 Opera,但可能会更改 move to WebKit)。
目前最可靠的解决方案是避免尝试转换 :after
内容,而是将其应用于现有元素之一。那会让你pretty good browser support 68%。
这是 a fork你原来的例子。我没有使用生成的内容,而是将 CSS 简化为:
.mainmenu li {
position: relative;
display: inline-block;
height: 86px;
margin: 0;
padding: 0;
background: url(http://placekitten.com/g/100/100) no-repeat center bottom;
}
.mainmenu li a {
position: relative;
display: block;
height: 100%;
background: #fff;
transition: all 1.5s ease-in-out;
}
.mainmenu li a:hover {
background: transparent;
}
在这里,过渡是在 a
本身上进行的,将其从白色淡化为透明以达到相同的效果。
关于html - css transition 仅适用于 Firefox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15499422/