0

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

到目前为止，我所拥有的是一个功能正常的动画悬停，其中有一个按钮，并且该按钮确实对点击事件起作用。我pointer-events: none在滑动aside元素上使用过，因为否则动画会跳到断点，所以，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;
}
4

1 回答 1

2

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

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

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

这是一个小提琴

于 2015-08-30T18:50:00.590 回答