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

Question

急！我正在使用 WordPress 插件创建在悬停时具有不透明度效果的框，但它似乎不适用于 Chrome 或 IE，而是它们逐渐变为不透明度：1 (100%) 虽然我修改了 CSS 到不透明度：0.2

在 Safari 和 Firefox 上运行良好，但在 Chrome 或 IE 上运行不佳。这可能是一个 webkit 问题吗？

Answer 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; */
}

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

Opacity on hover not working in Chrome or IE

css

wordpress

google-chrome

internet-explorer-10