Question

I have a menu in which each anchor should do a simple color fade transition when hovered over. The thing is that only one of the anchor elements is doing it (in this case, only the ‘twitter’ link) in Chrome v16.0.912.75 and none of the elements are transitioning in IE9 (Firefox 8.0.1 works OK). I have rotated the order of the links and have removed the ‘last’ class from the ‘twitter’ link with no results.

There’s not much to this so I’m not sure why it isn’t working.

#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>

You can see the working at http://events.bridalflowersexclusive.com. Thanks in advance for your time.

Answer 1

IE9 doesn’t support CSS transitions, Webkit has a bug that prevents :visited links from being animated.