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

Question

Urg! I'm using a WordPress plugin to create boxes with an opacity effect upon hover but it doesn't seem to work on Chrome or IE and instead they fades to opacity: 1 (100%) although I have modified the CSS to opacity: 0.2

Works well on Safari and Firefox but not Chrome or IE. Could this be a webkit issue?

Boxes below the slider: http://goo.gl/5IkgSF

Answer 1

That is because the opacity that you're trying to change is within keyframes so you need to modify the keyframes or add new keyframes to override the plugin's style.

In the animate.css line 517 you can find the following code, change the opacity from 1 to .2 as the following and it will work fine.

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