指针事件上的CSS过渡延迟不起作用 [英] css transition-delay on pointer-events not working

问题描述

我希望这些链接能够恢复在悬停容器之后被点击的功能.

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

在以下示例中，当父div悬停时，我对链接的可见性施加延迟.

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

推荐答案

我刚刚找到了一个很棒的解决方案对此.

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

想法如下:

1. 创建动画以更改所需的二进制属性(例如可见性).
2. 将动画附加到对象上.
3. 确保在动画之后以元素的样式包含属性的最终值.

这篇关于指针事件上的CSS过渡延迟不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！