Вложенные стили в IE переопределяют мои одинаковые имена на CSS-спрайтах - PullRequest
Новая
       11

Вложенные стили в IE переопределяют мои одинаковые имена на CSS-спрайтах

0 голосов
/ 08 апреля 2011

У меня есть несколько CSS-спрайтов, чтобы изменить изображение при наведении на них курсора.Затем у меня есть некоторый jQuery, который добавляет класс к элементу, если вы наводите на него курсор мыши (таким образом, изменяя фоновое изображение) и затемняете его. Это связано с тем, что требуется плавный переход между всплывающими изображениями, а не прямой разрез между одним изображениемдругому.

В Chrome и Firefox эффекты переворачивания и затухания работают нормально.Однако в IE последний стиль с тем же именем применяется к элементу с неправильным фоновым изображением.

Для приведенного ниже примера #main a.style2.active является фоновым изображением, отображаемым для style1.Я предполагаю, что это потому, что последний «активный» класс - это тот, который использует IE.

Как я могу реструктурировать свои стили, чтобы style1 получил фоновое изображение #main a.style1.active, примененное к нему?

    <style media="screen">
    #main{
        width: 985px;
        height: 600px;
        background: url(../img/my.jpg);
        margin: 0px; 
        padding: 0;
        position: absolute;
    }
    #main li {
        margin: 0; 
        padding: 0; 
        list-style: none;
    }

    #main a.style1 { left: 0px; width: 337px; top: 0px; height: 600px; position: absolute; }
    #main a.style1.active { background: url(../img/my.jpg) -0px -600px; }

    #main a.style2 { left: 337px; width: 330px; top: 0px; height: 600px; position: absolute; }
    #main a.style2.active { background: url(../img/my.jpg) -337px -600px; }
    </style>

    <script>
    $(document).ready(function(){

        $('.elem').mouseenter(function(){
            if ($(this).is(':animated')){
                $(this).stop();
            }
            $(this).hide().addClass('active').fadeTo(750,1);
        });

        $('.elem').mouseleave(function(){
            if ($(this).is(':animated')){
                $(this).stop();
            }
            $(this).fadeTo(750, 0, function(){
                $(this).removeClass('active').css({'filter' : 'none', 'display' : 'block'});
            });
        });

});
    </script>

    <ul id="main">
      <li><a class="elem style1" href="#"></a></li>
      <li><a class="elem style2" href="#"></a></li>
    </ul>

1 Ответ

2 голосов
/ 08 апреля 2011

Я думаю, что-то вроде этого должно работать: 

#main a.style1 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 337px;
    height: 600px;
    background-position: -0px -600px;
}

#main a.style2 {
    position: absolute;
    top: 0px;
    left: 337px;
    width: 330px;
    height: 600px;
    background-position: -337px -600px;
}

#main a.active {
    background-image: url(../img/my.jpg);
}
...