Question

当您将鼠标悬停在Chrome中的徽标上时，动画就会起作用。

  .logo_animate:hover{
    -webkit-filter: drop-shadow(-1px 0px 1px #705C12) drop-shadow(-1px 0px .02px 
    #705C12) drop-shadow(2px 0px .02px #705C12) drop-shadow(-1px 0px 1px #5C0704) 
    drop-shadow(-.02px 0px 1px #5C0704) drop-shadow(-.04px 0px 1px #5C0704)drop- 
    shadow(-1px 0px .02px #5C0704) drop-shadow(-.02px 0px .02px #5C0704) drop- 
    shadow(-.04px 0px .02px #5C0704) drop-shadow(.02px 0px .05px #5C0704);
    filter: drop-shadow(-1px 0px 1px #705C12) drop-shadow(-5px 0px .02px #705C12) 
    drop-shadow(-.02px 0px .02px #705C12) drop-shadow(-1px 0px 1px #5C0704) drop- 
   shadow(-.02px 0px 1px #5C0704) drop-shadow(-.04px 0px 1px #5C0704)drop- 
   shadow(-1px 0px .02px #5C0704) drop-shadow(-.02px 0px .02px #5C0704) drop- 
   shadow(-.04px 0px .02px #5C0704) drop-shadow(.02px 0px .05px #5C0704);
    stroke: #fff59d;
   }

当您将鼠标悬停在Firefox中的徽标上时，它将在“ mouseout”上启动动画（不使用Java脚本，但这就是效果）。

为什么Firefox悬停在SVG上时不触发CSS更改？

谢谢。

Answer 1

对我来说，在无此行的情况下，它在Chrome和Firefox中的工作方式相同：

-webkit-animation-fill-mode: forwards;

Firefox阴影CSS悬停动画不适用于SVG

1 个答案: