Блог

Одна из кнопок на моем сайте медленно реагирует на включение, и я не уверен, почему это происходит.

http://davincispainting.com затем нажмите на верхнюю правую кнопку «Нажмите для быстрого подключения»

 <div id='contact-form'>
    <a class="contact" href="#"></a>
</div>

a.contact {
background-image: url("/images/Home/RapidButton2.png");
display: block;
font-size: 11px;
text-align: center;
width: 165px;
height: 27px;
}

a.contact:hover {
background-image: url("/images/Home/RapidButtonHov2.png");
}
  

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

Попробуйте сделать это спрайтом. Т.е. объединить два изображения в одно изображение большего размера, где оба изображения сложены. используйте background-position свойство для сдвига большого изображения в соответствии с состоянием наведения.

как RapidButton-sprite.png становится:

и css:

 a.contact {
  background-image: url("/images/Home/RapidButton-sprite.png");
  background-position:left bottom; // or 0px -27px;
  .................
}

a.contact:hover {
  background-position:left top; // or 0px 0px;
  .................
}
  

Хороший учебник можно найти здесь