Перемещение изображения с использованием фонового изображения css

Я изучил альтернативные методы создания эффектов прокрутки изображения (как CSS, так и javascript). В процессе я столкнулся с необъяснимым поведением, используя один конкретный метод CSS:

.main-banner a#link1{
    background-image: url(images/yellow-button_03.png);
    background-repeat: no-repeat;   
    width:310px;
    height:85px;
    top:190.2px;
    left:277px;
} 

.main-banner a:hover#link1{

    background-image: url(images/yellow-button-bright_03.png);
    background-repeat: no-repeat;

}

Этот метод создает точку доступа с фоновым изображением. при наведении курсора изображение заменяется кнопкой другого цвета с точно такими же размерами.

При первом наведении курсора появляется очень легкое мерцание, так как прокручиваемое изображение инициализируется только в первый раз. Событие происходит только после первого кеша таблицы стилей.

Мой вопрос заключается в следующем:

Учитывая, что CSS полностью загружен, почему происходит такое поведение?

Поведение будет указывать на то, что фоновое изображение прокрутки css не загружается до начального события наведения мыши? Тем не менее, это не так.

Пожалуйста, не предоставляйте альтернативное решение для репликации функции ролловера. Это не вопрос.

Мне интересно только понять, почему при первом переворачивании появляется небольшое мерцание. Спасибо.


image css rollover
person user1526693    schedule 28.08.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward 

.main-banner a#link1:hover{

    background-image: url(images/yellow-button-bright_03.png) no-repeat;

}

Обычно псевдоклассы пишутся после селектора, a or a#link1 — это селектор, поэтому вы должны написать a#link1:hover

Ознакомьтесь с этим http://jsfiddle.net/d5RpE/1/.

@Tuanderful - именно поэтому в этом состоянии мы можем использовать «спрайт изображения», чтобы при первом возникновении события :hover изображение не колебалось

person Chandrakant    schedule 28.08.2012
comment
При использовании описанного выше метода флуктуация все еще происходит. Спасибо за ответ, но вопрос так и остался без ответа. Я ищу, почему не как. - person user1526693; 29.08.2012

arrow_upward
0
arrow_downward

Хотя CSS полностью загружен, я не думаю, что все элементы, на которые есть ссылки в CSS, загружены до тех пор, пока они не потребуются. Другими словами, yellow-button_03.png загружается для отображения ссылки при первой загрузке страницы, но я считаю, что yellow-button-bright_03.png загружается только после того, как вы наведете курсор на ссылку.

person Tuanderful    schedule 28.08.2012
comment
Это было первое объяснение, которое пришло мне в голову. Я хотел бы быть уверен, что это объяснение на 100% верно. - person user1526693; 29.08.2012
comment
Я проверил это, проверив элемент в Chrome. Я делаю что-то подобное на www.2uan.com; если вы загрузите страницу и посмотрите на вкладку Ресурсы в Инструментах разработчика в разделе Фреймы › (2uan.com) › Изображения, при загрузке страницы вы увидите загруженное изображение social.png. Как только вы наведете курсор на значки в нижнем колонтитуле, вы увидите изображения, обновленные с помощью social-hover.png. Я не уверен, что это лучший способ решить проблему, но я, вероятно, объединим спрайты social со спрайтами social-hover, чтобы загрузить их все при загрузке страницы и избавиться от мерцания. - person Tuanderful; 30.08.2012