css transition-delay on pointer-events not working

Question

I want that links recover the ability of being clicked after there container has been hovered.

In the following example I apply delay on the visibility of links when parent div is hovered.

But I can't apply the same philosophy to the pointer-events attribute.

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

I just found a great solution to this.

@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;
}

The idea is as follows:

1. Create an animation that changes the desired binary property (eg visibility).
2. Attach the animation to your object.
3. Make sure to include the final value for the property in the style of the element, after the animation.

Answer 2

Try adding them to the selector and not the pseudo selector. ( a instead of a:hover .)

Example of transitions on W3 Schools

Answer 3

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

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