jquery ie8悬停问题– 动画/颜色不适用于过滤器旋转元素

Question

http://www.the900number.com/news

在 ie8 中，当您将鼠标悬停在导航项上，然后将鼠标从其上移开 - 与当您实际将鼠标悬停在该项上时触发悬停状态相反。

它在 IE7 中运行得很好，所以我不确定 IE8 出了什么问题以及它如何查看盒子模型。非常感谢任何见解！

Jquery：

//Nav hover
        $('#nav li:not(.current)').hover(function() {
            var bgColor = $(this).css('color');
            $(this).animate({
                backgroundColor: bgColor,
                marginRight: '10px'
            }, 200);
        }, function() {
            $(this).animate({
                backgroundColor: '#000',
                marginRight: '0px'
            }, 200);
        });

CSS：

#nav {
    width: 180px;
    position: absolute;
    left: 25px;
    top: 14px;
    z-index: 100000;
    line-height: 26px;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }

#nav li {
    float: right;
    list-style: none;
    display: block;
    height: 29px;
    padding: 2px 0px 0 0px;
    background: black;
    margin-bottom: 2px;
    }

#nav li a {
    position: relative;
    left: 9px;
    display: block;
    color: #fff;
    font-size: 16px;
    letter-spacing: 1px;
    font-family: "bigNoodle","refrigerator-deluxe-1", "refrigerator-deluxe-2", "helvetica neue", helvetica, arial;
    text-decoration: none !important;
    text-transform: uppercase;
    cursor: pointer;
    }

有什么想法吗？

谢谢！

Answer 1

我不知道为什么这有效，但它确实有效。添加行“opacity: 1.0”使动画在 ie8 中工作。与组合 microsoft css 过滤器有关。

 //Nav hover
            $('#nav li:not(.current)').hover(function() {
                var bgColor = $(this).css('color');
                $(this).animate({
                    backgroundColor: bgColor,
                    opacity: 1.0,
                    marginRight: '10px'
                }, 200);
            }, function() {
                $(this).animate({
                    backgroundColor: '#000',
                    opacity: 1.0,
                    marginRight: '0px'
                }, 200);
            });