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中工作。与微软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);
            });

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

1 个答案: