指针事件上的css过渡延迟不起作用

Question

我希望链接在容器被悬停后恢复被点击的能力。

在下面的示例中，当父 div 悬停时，我对链接的可见性应用延迟。

但是我不能将相同的理念应用于指针事件属性。

http://jsfiddle.net/coolcatDev/trLf02e2/4/

html：

<div class="a">
    <a href="#">Some link</a><br>
    <a href="#">Some link</a><br>
    <a href="#">Some link</a><br>
    <a href="#">Some link</a><br>
    <a href="#">Some link</a>
</div>

<div class="b">
    <a href="https://google.com">Some link</a><br>
    <a href="https://google.com">Some link</a><br>
    <a href="https://google.com">Some link</a><br>
    <a href="https://google.com">Some link</a><br>
    <a href="https://google.com">Some link</a>
</div>

css：

.a, .b{
    border:2px solid grey;
}

.a a{
    visibility:hidden;
}

.a:hover a{
    visibility:visible;
    transition-delay:1s;
}

.b a{
    pointer-events:none;
    cursor:default;
}

.b:hover a{
    pointer-events:auto;
    cursor:pointer;
    color:red;
    transition-delay:2s ;
}

Answer 1

我刚刚找到了一个很好的解决方案。

@keyframes delay-pointer-events {
    0% {
        visibility: hidden;
    }
    50% {
        visibility: hidden;
    }
    100% {
        visibility: visible;
    }
}
.container:hover .element {
  animation: delay-pointer-events 2000ms linear;
  display: block;
  opacity: 1;
  visibility: visible;
  transition: opacity 250ms;
  transition-delay: 250ms;
  z-index: 10000;
}

思路如下：

1. 创建改变所需二进制属性（例如可见性）的动画。
2. 将动画附加到您的对象。
3. 确保在动画之后在元素的样式中包含属性的最终值。

Answer 2

尝试将它们添加到选择器而不是伪选择器。 （ a而不是a:hover 。）

W3 学校的过渡示例

Answer 3

a:hover {
  animation: disable-pointer-events 500ms;
}

@keyframes disable-pointer-events {
  0%, 99% {
    pointer-events: none;  
  }  
}