当鼠标悬停但没有移动时，变换后的图像将不会保持可见状态？

Question

我有我的课程页面here，我在其中将带有CSS的3D变换应用于图片以通过过渡来放大它们。问题出现在我悬停时它应该完成转换它只是消失，除非鼠标在仍然悬停时移动。

我已经尝试过这些东西，以确保没有闪烁：

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

和

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

但没有什么能解决的。

Answer 1

您需要将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）但doesn't exist。

Answer 2

CSS :hover只能在鼠标悬停元素时发出单词，这就是它的工作方式。

如果您想通过悬停开始放大并继续到最后，无论鼠标位置如何，您都可以使用 CSS动画。