CSS 悬停不起作用（由于伪元素）？

Question

我正在摆弄 SVG 和 CSS 效果，以实现类似于游戏“limbo”的外观。 这就是我的标记的样子（https://codepen.io/Richard-Hahn/pen/VwRwwjm）：

<div class="tiltshift">
<div class="grain">
<svg>...</svg>
</div>
</div>

.grain{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:auto;
  background-position:center
}

.grain:after{
  content:"";
  background-image:url("https://upload.wikimedia.org/wikipedia/commons/7/76/1k_Dissolve_Noise_Texture.png");
  height: 300%;
  width: 300%;
  position: fixed;
  opacity:0.1;
  animation: animateGrain 8s steps(10) infinite;
  

  
}

@keyframes animateGrain{
  0%, 100% { transform:translate(0, 0) }
  10%{
    transform:translate(-5%,-10%)
  }
  20%{
    transform:translate(-15%,-20%)
  }
  30%{
    transform:translate(-5%,-10%)
  }
  40%{
    transform:translate(-15%,-20%)
  }
  
  50%{
    transform:translate(-5%,-10%)
  }
  60%{
    transform:translate(-15%,-20%)
  }
  70%{
    transform:translate(-5%,-10%)
  }
  80%{
    transform:translate(-15%,-20%)
  }
  90%{
    transform:translate(-5%,-10%)
  }
  100%{
    transform:translate(-15%,-20%)
  }
 
}

.tiltshift:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        backdrop-filter: blur(26px);
        animation: clip-fade 12s infinite alternate;
    }

.tiltshift {
  border:1px solid red;
}

@keyframes clip-fade {
  0% {
    mask-image: linear-gradient(204deg, rgba(0, 0, 0, 1), transparent 100%);
  }
  
  100% {
    mask-image: linear-gradient(0deg, rgba(0, 0, 0, 1), transparent 100%);
  }
}


#rect1 {
  fill:red !important;
  
}

#rect1:hover {
  transform:scale(1.07) !important;
}

颗粒和倾斜效果按预期工作，但我无法再触发 svg-elements 上的悬停行为。我做错了什么？

使用 Firefox 检查器，当我选择元素时，我可以触发悬停。所以我怀疑是伪元素阻止了 svg-elements 上的悬停。

Answer 1

你的直觉是对的，伪元素正在干扰悬停事件。事实上，由于它们占据了所有的屏幕空间，因此它们是在 rect 元素之前“捕获”悬停事件的对象。

您可以通过向伪元素添加

pointer-events: none

规则来解决此问题。这样，它们就不会再捕获悬停，并且矩形现在可以自由地受到它的影响。

参见 https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events