Спрайт не меняется, а передвигается при наведении

Тема в разделе "Верстка", создана пользователем danneo, 11 дек 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.463
    Симпатии:
    114
    Сделана ссылка с фоном. При наведении фон меняется. Фон сделан спреем.
    Когда навожу на ссылку, фон не меняется, а передвигается, прокручивается вверх, другими словами. Должен же резко меняться, незаметно для пользователя.
    Проблема возникла при интеграции верстки в двиг. Скорее всего какой-то конфликт с другими скриптами, типа JS или CSS.
    Как можно узнать причину, что делает такое свойство?

    Стиль:
    Код:
    #wrapper .top-bar-right a {
        width:61px;
        height:29px;
        text-align:left;
        line-height:29px;
        padding-left:31px;
        background:url(lp.png);
        background-position:0 0;
        color:#2d1615;
        text-decoration:none;
        display:block;
        font-size:12px;
        font-family:verdana;
    }
    #wrapper .top-bar-right a:hover {
        background-position:0 -31px;
        color:#992d27;
    }
     
  2. Carleone

    Carleone Постоялец

    Заблокирован
    Регистр.:
    8 ноя 2012
    Сообщения:
    51
    Симпатии:
    39
    явно же видно, что всему виной вот этот код
    Код:
        background-position:0 -31px;
    Оставить 0 0; и будет меняться только цвет
     
  3. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.463
    Симпатии:
    114
    нет. Цвет-то, понятно, должен меняться, и меняется. Но и фон должен меняться. Дело в том, что он не меняется, а как скролл переезжает вверх.
     
  4. AGENT131313

    AGENT131313 Забанен

    Регистр.:
    17 мар 2009
    Сообщения:
    282
    Симпатии:
    28
    #wrapper .top-bar-right a:hover {
    background: #aaaaaa;
    color:#992d27;
    }
     
  5. Gvaxvoir

    Gvaxvoir Писатель

    Регистр.:
    2 ноя 2012
    Сообщения:
    5
    Симпатии:
    2
    CSS код вроде верный... ничего проблематичного не вижу, попробуйте поотключать JS по одному, думаю какой-то конфликт с ними
     
  6. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.463
    Симпатии:
    114
    Нашел методом исключения :)
    в другом файле CSS есть код:
    Код:
    a{
    color:#333640;
    text-decoration:none;
    -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    -transition:all 0.2s linear
    }
    Я не понимаю в кроссбраузерности. Поэтому эти свойства -moz- -webkit ни о чем конкретном не говорят.
    Скажите, пожалуйста, как их подправить, чтобы не конфликтовало?

    Хотя вроде получилось, добавил несколько строк:
    Код:
    #wrapper .top-bar-right a {
    ....
        -webkit-transition:all 0s linear;
        -moz-transition:all 0s linear;
        -o-transition:all 0slinear;
        -transition:all 0s linear;
    }
    Не знаю, правильно или нет
     
  7. funnywheel

    funnywheel WordPress developer

    Регистр.:
    6 авг 2010
    Сообщения:
    245
    Симпатии:
    177
    я думаю правильно, во всяком случае сделал-бы так-же, только поставил-бы !important для transition
    Код:
    #wrapper .top-bar-right a {
    ....
        -webkit-transition:all 0s linear !important;
        -moz-transition:all 0s linear !important;
        -o-transition:all 0s linear !important;
        -transition:all 0s linear !important;
    }
    ps. сначала несколько раз прочитал и не понял. фон у Вас сделан спрайтом а не спреем. Понятия спрей в CSS нет.
     
    t3s нравится это.
  8. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.463
    Симпатии:
    114
    главное все же понял :D