Ошибка со спрайтом CSS при наведении курсора на изображение со ссылкой - PullRequest
Новая
       9

Ошибка со спрайтом CSS при наведении курсора на изображение со ссылкой

0 голосов
/ 07 февраля 2020

Я работаю над своим веб-сайтом и первоначально использовал два отдельных изображения размером 210 на 210 пикселей для ссылки на изображение (которая при наведении курсора превращается в другое изображение). Однако я обнаружил, что всегда было небольшое мерцание, когда сначала наведя курсор на изображение, которое, очевидно, беспокоило меня, поэтому я решил переключиться на CSS спрайт с двумя изображениями на нем. Таким образом, я не получил бы мерцание.

К сожалению, я не могу заставить спрайт CSS работать успешно. Я создаю свой веб-сайт в Wordpress BoldGrid Post и Page Builder, поэтому я не делаю HTML / CSS, но настройщик позволяет мне добавить свой собственный пользовательский CSS, что я и делаю.

Я дал ссылку на изображение CSS ID "home" в настройках изображения (в Post и Page Builder). Это то, что я вставил в свой пользовательский CSS: 

#home:hover a  {
background:url(https://www.mywebsite.com/hoverimage.png);
position: absolute;
background-position: -210px 0;
}

. В настоящее время исходное изображение не сдвигается, и я могу видеть наведенное изображение ПОД оригинальным изображением (его граница толще, и я можно увидеть это снизу).

Я, должно быть, что-то упустил с этим. Поскольку я работаю в Wordpress Post и Page Builder, он делает следующие CSS Sprite учебники онлайн не такими простыми. Надеюсь, это легко исправить.

1 Ответ

0 голосов
/ 07 февраля 2020

:hover используется неправильно ...

с помощью #home:hover a вы применяете фон к a только тогда, когда элемент #home наведен ...

должно быть: 

#home a  {
  background:url(https://www.mywebsite.com/hoverimage.png);
  position: absolute;
}
#home:hover a  {
  background-position: -210px 0;
}

Примерно так: 

#home a img {
  display: none;
}
#home a  {
  background:url("https://via.placeholder.com/420x210");
  position: absolute;
  width: 210px;
  height: 210px;
  display: block;
}
#home:hover a  {
  background-position: -210px 0;
}
<div id="home">
  <a href="#">
    <img src="https://via.placeholder.com/210x210?text=original%20image">
  <a>
</div>
...