文章/答案/技术大牛

发布

社区首页 >问答首页 >Firefox下拉阴影CSS悬停动画在SVG上不起作用

问Firefox下拉阴影CSS悬停动画在SVG上不起作用
EN

Stack Overflow用户

提问于 2018-07-16 20:03:34

回答 1查看 83关注 0票数 0

Codepen Example

当你将鼠标悬停在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“上启动动画(不是使用Javascript，但这就是效果)。

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

提前谢谢你。

html

css

animation

svg

drop-shadow

回答 1

Stack Overflow用户

发布于 2018-07-17 02:34:57

对我来说，它在Chrome和Firefox中的工作方式是相同的，没有这一行：

-webkit-animation-fill-mode: forwards;

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51361415

复制

相似问题

问Firefox下拉阴影CSS悬停动画在SVG上不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Firefox下拉阴影CSS悬停动画在SVG上不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Firefox下拉阴影CSS悬停动画在SVG上不起作用
EN