悬停不透明度在 Chrome 或 IE 中不起作用

Posted 2023-03-06

【中文标题】悬停不透明度在 Chrome 或 IE 中不起作用

【英文标题】：Opacity on hover not working in Chrome or IE

【发布时间】：2015-06-02 18:12:31

【问题描述】：

急！我正在使用 WordPress 插件在悬停时创建具有不透明度效果的框，但它似乎不适用于 Chrome 或 IE，而是它们淡化为 opacity: 1 (100%) 尽管我已将 CSS 修改为 opacity: 0.2

适用于 Safari 和 Firefox，但不适用于 Chrome 或 IE。这可能是一个 webkit 问题吗？

滑块下方的框：http://goo.gl/5IkgSF

【问题讨论】：

您是否添加了供应商前缀（如果有） - 您是否在更新不透明度时更改了所有值？ css-tricks.com/css-transparency-settings-for-all-broswers

【参考方案1】：

这是因为您尝试更改的不透明度在关键帧内，因此您需要修改关键帧或添加新关键帧以覆盖插件的样式。

在animate.css 行517 中可以找到以下代码，将不透明度从1 更改为.2，如下所示，它将正常工作。

@-webkit-keyframes fadeIn 
    0% opacity: 0;    
    100% opacity: .2;


@-moz-keyframes fadeIn 
    0% opacity: 0;    
    100% opacity:  .2;


@-o-keyframes fadeIn 
    0% opacity: 0;    
    100% opacity: .2;


@keyframes fadeIn 
    0% opacity: 0;    
    100% opacity:  .2;


.fadeIn 
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn;
    /* opacity: .2; */