：在阻止锚标记之前，更改指针事件将不起作用

Question

我正在尝试制作一个类似“卡片”的悬停元素，您可以单击它，它会重定向您。这是代码： https://jsfiddle.net/gn4kufcy/

我最初的问题是由于卡片向上变形造成的。当您将鼠标悬停在卡片底部时，它出现故障。添加

.servercard:before

伪元素解决了这个问题，但引入了一个新问题：现在链接不起作用，因为它被

:before

元素覆盖。

我链接的 JSFiddle 的卡片完全按预期工作，但我无法单击它。

stackoverflow 上的其他答案建议将以下属性添加到我的

:before

元素中：

pointer-events: none;

这使得卡片可点击，但返回了故障行为，这破坏了整个点。我希望卡片可以点击，并且当我将鼠标悬停在底部时不会出现故障，但我一直无法实现这一点。

Answer 1

您面临的问题是由于一个名为

stacking context

的概念造成的，当您给出子元素位置时，它会堆叠在未定位的同级元素上。

现在您的

:before

与

position:absolute

一起定位，但兄弟姐妹不是，所以

:before

位于链接顶部

还可以有其他解决方案，但对于这种情况，一个简单的解决方案是为链接提供位置

.servercard a {
    position: relative; /* I added this line */
}

.servercard {
    display:flex;
    background-color: #26282c;
    border-style:solid;
    border-width:1px;
    border-radius:8px;
    width: 18%;
    min-width: 125px;
    color:white;
    transition: background-color .125s,box-shadow .125s, transform .125s;
    position:relative;
    margin-top: 21px;
    margin-left: 16px;
}

.servercard a {
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:start;
    height: 183.41px;
    width: 100%;
    color: inherit;
    text-decoration: none;
    position: relative; /* I added this line */
}

.servercard img {
    margin-top:15px;
    margin-bottom: 20px;
}
  
.servercard:hover {
    transform: translateY(-9px);
    cursor:pointer;
    box-shadow: 0 10px 18px rgba(0,0,0,.35);
    background-color: #1e2023;
    transition: background-color .125s,box-shadow .125s, transform .125s;
    transform-origin: center bottom;
}
  
/* these elements stop the card animation from glitching */
.servercard:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
}
  
.servercard:hover::before {
    height: calc(100% + 1em);
}
  
  
.text {
    word-wrap:break-word;
    max-width:145px;
    margin: 0 auto;
}
  
.servercard img {
    border-radius: 50%;
}

<div class="servercard">
  <a href="https://google.com">
    <img src="https://bellzi.com/cdn/shop/products/Lr-9890-sw.jpg" height=100>
    <p class="text">Test</p>
  </a>
</div>