Html 仅使用css制作可单击的动画悬停

关键是当您将鼠标悬停在图像上时，让

aside

元素输入，不仅使用CSS，而且让其子元素接受单击事件

到目前为止，我有一个功能正常的动画悬停，里面有一个按钮，这个按钮对点击事件起作用。我在滑动的

侧边

元素上使用了

指针事件：none

，因为否则动画会跳跃到崩溃点，因此，

指针事件：none

会消除这种影响，只要你在悬停，动画就会平滑持久

当您将鼠标悬停在按钮上时，会出现问题。它将把

放在一边

转换出来（参见，它比我的蹩脚英语好）

我正在寻找一种方法来防止

旁边的
返回到其初始隐藏位置。当然，挑战在于只使用CSS

以下是代码（也在中）：

HTML:

添加下面的样式似乎解决了这个问题

.hover:hover {
 transform: translateX(0);
}

悬停内容时强制运行动画

这是一个
OMFG。这太简单了，我一直都在为这件事伤脑筋！哈哈：D
.thumbnail {
  position: relative;
  overflow: hidden;
}

.template-img {
  width: 100%;
  height: 100%;
}

.template-img:hover ~ .hover {
  transform: translateX(0);
}

.template-img:focus {
  pointer-events: none;
}

.template-img:focus ~ .hover {
  transform: translateX(0);
  transition: none;
}

.hover {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  padding-top: 15%;
  transform: translateX(-100%);
  transition: transform .4s ease-out;
  pointer-events: none;
  background: rgba(255, 0, 0, 0.4);
  z-index: 10;
}

.button {
    pointer-events: auto;
}

.hover:hover {
 transform: translateX(0);
}