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

Question

关键是当您将鼠标悬停在图像上时，仅使用CSS使aside元素进入，但也让其子元素接受单击事件。

到目前为止，我所拥有的是一个功能动画悬停，其中有一个按钮，按钮做点击事件。我在滑动的aside元素上使用了pointer-events: none，因为否则动画会跳跃到中断的点，所以，pointer-events: none解决了这个问题，只要你悬停，动画就会变得平滑和持久。

当您将鼠标悬停在按钮上时出现问题。它将使aside过渡出来(看小提琴，它比我的蹩脚英语好多了)。

我正在寻找一种方法来防止aside返回到其初始的隐藏位置。当然，挑战在于只使用CSS !

下面是代码(它也在文件中):

HTML:

<div class="thumbnail">
  <img src="http://i59.tinypic.com/10cvw8y.jpg" class="template-img">
  <aside tab-index="1" class="hover">
    <button class="button" onclick="alert('wow')">CLICK ME</button>
  </aside>
</div>

CSS:

.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;
}

Answer 1

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

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

强制动画在内容悬停时也运行

Here's fiddle