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

Question

重点是当您将鼠标悬停在图像上时，让 aside 元素进入，仅使用 CSS，而且让其子元素接受点击事件。

到目前为止，我所拥有的是一个功能正常的动画悬停，其中有一个按钮，并且该按钮确实对点击事件起作用。我在滑动 aside 元素上使用了 pointer-events: none，否则动画会跳动到中断的程度，因此，pointer-events: none 将其排除在外并且动画流畅且持久只要你在徘徊。

当您将鼠标悬停在按钮上时会出现问题。它会使 aside 过渡出来（参见 fiddle，它比我糟糕的英语更好）。

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

这是代码（它也在 fiddle 中）：

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

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

这是一个fiddle

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

Make a clickable, animated hover using css only

html

css

css-transitions

pointer-events