html - css transition-delay on pointer-events 不起作用

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

我刚找到一个很棒的 solution对此。

@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. 确保在动画之后在元素样式中包含属性的最终值。