时间戳

首页 > 解决方案 > css 动画使图像超链接不再可点击

html - css 动画使图像超链接不再可点击

问题描述

我有一个带有超链接的图像，其简化如下：

<div class="button-div">
  <a href="xxx"><img src="xxx"></a>
</div>

在本教程的帮助下，我正在尝试使用 css 为图像创建动画效果（尽管是为 divi 主题编写的，但我不使用）。要添加的部分样式是：

.button-div:before {
  content: '';
  position: absolute;
  /* This is your ripple color & size */
  border: #00cc69 solid 6px;
  /* Uncomment the line below if it's a circle*/
  border-radius: 50%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

虽然这成功创建了动画效果，但图像不再可点击。或者更准确地说：只有圆形图像的透明角仍然是可点击的。但是，如果我删除该行content: ''，则图像可以正确单击，但动画效果消失了。

如何使动画和超链接一起工作？

标签： htmlcss

解决方案

您的::before伪元素堆叠在<a>您的元素之上.button-div，因此它会捕获所有点击事件。您可以pointer-events: none在伪元素上使用以确保单击事件通过它并向下传递到<a>下面的元素。

.button-div:before {
  /* Ensures pseudo element does not receive pointer events */
  pointer-events: none;

  content: '';
  position: absolute;
  border: #00cc69 solid 6px;
  border-radius: 50%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

推荐阅读