代码之家 › 专栏 › 技术社区 › HandiworkNYC.com

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

hover internet-explorer-8 jquery

0

HandiworkNYC.com · 技术社区 · 16 年前

http://www.the900number.com/news

它在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;
    }

有什么想法吗?

谢谢!

1 回复 | 直到 16 年前

1

0

HandiworkNYC.com 16 年前

我不知道为什么会这样,但确实如此。添加行“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);
            });