Кнопка отправки исчезает при наведении курсора, а затем снова появляется

Question

Так что я использую CSS: hover, чтобы заменить фон кнопки отправки. При наведении курсора на кнопку старое фоновое изображение на мгновение исчезает (так что кажется, что ничего нет), а затем снова появляется с новым фоном. Я подумал, что, возможно, размер файла изображения кнопки слишком велик, но его размер составляет всего 1,4 КБ. Есть ли способ предотвратить это, кэширование или предварительную загрузку, или что-то в этом роде?

Answer 1

Это только на начальной странице отображения / наведения?

Это будет связано с тем, что файл изображения загружается только по запросу, т. Е. Действие при наведении.

Чтобы избежать этого, оба состояния кнопок должны храниться в одном файле. Затем вам просто нужно настроить свойство background-position для отображения правильной половины изображения для его текущего состояния.

Вот грубый пример (обратите внимание, что button.png содержит оба состояния изображения и имеет высоту 40 пикселей):

button {
background-image: url(button.png);
width: 60px;
height: 20px;
background-position: 0 0;
}

button:hover {
background-position: 0 -20px;
}

Answer 2

Возможно, вы могли бы использовать технику, которая похожа на намерение , хотя и не исполнение , на ответ Брин выше.

.button {background-image: url(img/for/hover-state.png)
         background-position: top left;
         background-repeat: repeat-x;
         background-color: #fff;
         height: 1.5em;
         width: 5em;
}

.button span
        {background-image: url(img/for/non-hover-state.png);
         background-position: top left;
         background-repeat: repeat-x;
         background-color: #000;
         height: 1.5em;
         width: 5em;
}

.button:hover span
        {background-color: transparent;
         background-image: none;
}

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

Бонус в том, что, хотя я указал height / width выше, этот метод будет работать для динамического изменения размера, не полагаясь на размеры изображений фиксированной ширины (или это настолько изменчиво, насколько это позволяет ваш дизайн быть).

Answer 3

Это связано с тем, что для загрузки «зависшего» изображения требуется время, прежде чем оно отобразится. Чтобы предотвратить это, вы можете использовать технику изображения спрайта.

Пример: Использование изображений спрайта с INPUT для эффекта наведения