使用伪后链接无法点击

Question

我遇到了问题，我为边框创建了悬停动画，但问题是动画结束后该DIV中的所有链接（一个href）都无法点击，是否可以排除它们或做一些事情来制作可随时点击？

Here is a Codepen

所有评论都非常感谢，提前感谢。

所以这是我的结构设置

<div class="container">
<div class="row">
<div class="col-lg-4 image-cover">
<div class="first">
<div class="read-more">
<a href="">read more>>></a></div>
<div class="date">
<p>date</p></div>
</div>
</div>
</div>
</div>

样式很大所以我不能在这里粘贴它，如果你可以检查codepen

Answer 1

您的伪元素正在您的链接上绘制，因此您实际上是单击伪而不是下面的链接。

您需要添加指针事件：无;或者z-index：-1到你的伪元素

.first {
  &::before,
  &::after {
    pointer-events:none;
    /* OR */
    z-index:-1;
  }
}

Answer 2

正在发生的事情是你的伪元素正在绘制原始元素，所以如果你将鼠标悬停在链接上，你实际上只是将鼠标放在::before和::after上。一个简单的解决方法是将以下行添加到伪选择器中：

&:hover::before,
&:hover::after {
  pointer-events: none;
}

这会让鼠标忽略这些元素，允许点击链接下方的点击。

有关pointer-events的更多信息：MDN