Question

我有一个菜单，其中每个锚点在悬停时应该进行简单的颜色渐变过渡。问题是Chrome v16.0.912.75中只有一个主要元素正在执行它（在这种情况下，只有'twitter'链接）并且没有任何元素在IE9中转换（Firefox 8.0.1正常工作）。我已经轮换了链接的顺序，并从“推特”链接中移除了“最后一个”课程而没有结果。

没有太多的东西，所以我不确定它为什么不起作用。

#menu_left a{
    display:block;
    width:100px;
    height:30px;
    margin:10px auto;
    font:18px bold;
    text-decoration:none;
    border-bottom:1px dotted #e69b8d;
    -webkit-transition: 0.25s ease-in;
    -moz-transition: 0.25s ease-in;
    transition: 0.25s ease-in;
    }
#menu_left a.last{border-bottom:none;}
#menu_left a:hover{
    color:#ed9887;
    transition: 0.25s ease-out;
    -webkit-transition: 0.25s ease-out;
    -moz-transition: 0.25s ease-out;
    }    

<div id="menu_left">
    <a href="/">home</a>
    <a href="/gallery/">gallery</a>
    <a href="/contact/">contact us</a>
    <a href="http://www.facebook.com">facebook</a>
    <a href="http://www.twitter.com" class="last">twitter</a>
</div>

您可以在http://events.bridalflowersexclusive.com看到工作。提前感谢您的时间。

Answer 1

IE9不支持CSS转换，Webkit有一个错误阻止：访问过的链接不会被动画化。

Answer 2

查看此链接上的浏览器支持。您可能想要寻找JavaScript / JavaScript框架解决方案？

http://www.w3schools.com/css3/css3_transitions.asp

CSS Transition仅适用于某些元素

2 个答案: