Question

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

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

但是我不能将相同的哲学应用于pointer-events属性。

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

想法如下：

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

Answer 2

尝试将它们添加到选择器而不是伪选择器。（a代替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;  
  }  
}

指针事件的css转换延迟不起作用

3 个答案: