Question

关键是当您将鼠标悬停在图片上时，仅使用CSS输入aside元素，同时让其子级接受点击事件。

到目前为止，我所拥有的是一个正常运行的动画悬停，其中有一个按钮，按钮按钮处理点击事件。我在滑动pointer-events: none元素上使用了aside，因为否则动画会跳到破坏的位置，因此，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制作可点击的动画悬停

1 个答案: