Преобразованное изображение не останется видимым, когда мышь зависает, но не двигается?

У меня здесь есть страница моего класса, где я применяю 3D-преобразование с помощью CSS к изображениям, чтобы увеличить их с помощью перехода. Проблема возникает, когда я парю, и предполагается, что переход завершен, и он просто исчезает, если мышь не двигается, все еще зависая.

Я уже попробовал эти вещи, чтобы убедиться, что нет мерцания:

   transform: translateZ(0);
   -webkit-transform: translateZ(0);

а также

   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;

Но ничто не исправило это.

Источник

2 ответа

Решение

Вам нужно переопределить ваш CSS в:

div.regionarticle figure:hover, div.regionarticle figure:active {
  width: 30%;
  float: right;
  transform: translate3d(-180px, 80px, 0px) scale(2, 2);
}

В настоящее время у вас есть scale3d(2, 2, 0), но этого не существует.

Источник

CSS :hover можно только произносить слова, пока мышь все еще держит элемент, вот как это работает.

Если вы хотите, чтобы увеличение начиналось с наведения и продолжалось до конца независимо от положения мыши, вы можете использовать CSS-анимацию.

Источник
Другие вопросы по тегам