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

[danneo]

Сделана ссылка с фоном. При наведении фон меняется. Фон сделан спреем.
Когда навожу на ссылку, фон не меняется, а передвигается, прокручивается вверх, другими словами. Должен же резко меняться, незаметно для пользователя.
Проблема возникла при интеграции верстки в двиг. Скорее всего какой-то конфликт с другими скриптами, типа 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;
}

 

[Carleone]

явно же видно, что всему виной вот этот код

    background-position:0 -31px;

Оставить 0 0; и будет меняться только цвет

 

[danneo]

явно же видно, что всему виной вот этот код

    background-position:0 -31px;

Оставить 0 0; и будет меняться только цвет

нет. Цвет-то, понятно, должен меняться, и меняется. Но и фон должен меняться. Дело в том, что он не меняется, а как скролл переезжает вверх.

 

[AGENT131313]

#wrapper .top-bar-right a:hover {
background: #aaaaaa;
color:#992d27;
}

 

[Gvaxvoir]

CSS код вроде верный... ничего проблематичного не вижу, попробуйте поотключать JS по одному, думаю какой-то конфликт с ними

 

[danneo]

Нашел методом исключения
в другом файле 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;
}

Не знаю, правильно или нет

 

[funnywheel]

я думаю правильно, во всяком случае сделал-бы так-же, только поставил-бы !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 нет.

 

[danneo]

ps. сначала несколько раз прочитал и не понял. фон у Вас сделан спрайтом а не спреем.

главное все же понял