jquery ie8 проблема при наведении - анимация / цвет не работает на элементе, повернутом фильтром - PullRequest
Новая
       6

jquery ie8 проблема при наведении - анимация / цвет не работает на элементе, повернутом фильтром

0 голосов
/ 03 сентября 2010

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

Есть идеи?

Спасибо!

1 Ответ

0 голосов
/ 05 сентября 2010

Я не знаю, почему это сработало, но это сработало.Добавление строки «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);
            });
...