0

当您将鼠标悬停在菜单上时，我正在尝试使用 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。

4

2 回答 2

2

正如@Tyriar 所说，对生成内容的过渡/动画的支持是不完整的。它适用于我最新的 Chrome Canary（版本 27.0.1444.3），所以很快它就会出现在常规频道上。届时，IE10、Firefox 4+ 和 Chrome 将支持该功能。Safari 有一个明显的例外（和 Opera，但随着向 WebKit的迁移可能会改变）。

目前最强大的解决方案是避免尝试转换:after内容，而是将其应用于现有元素之一。这将为您提供 68% 的不错的浏览器支持。

这是您原始示例的一个分支。我没有使用生成的内容，而是将 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自身上，从白色渐变到透明以达到相同的效果。

于 2013-03-19T12:42:31.583 回答
0

如前所述，:psuedo元素上的 CSS 过渡没有得到最大的支持。 http://css-tricks.com/transitions-and-animations-on-css-generated-content/

使用直接的 html/css 你可以做到这一点，但你需要添加一个额外的元素，这是一个快速的小提琴：http: //jsfiddle.net/9uwVb/

于 2013-03-19T12:48:23.890 回答