Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Why does this hover transition not work in Chrome?

Why does this hover transition not work in Chrome?

Problem

I've been thinking about this issue for the past few days but I can't figure out what exactly is the problem.

Consider the following snippet from style.css:

.tint:before {
        -moz-transition: all .3s linear;
     -webkit-transition: all .3s linear;
         -ms-transition: all .3s linear;
          -o-transition: all .3s linear;
             transition: all .3s linear;
}
.tint:hover:before {background:rgba(159,182,205,0.1);}

As you can see from the code above, upon an image Hover, a "tint" Transition should occur as to make the user want to click on that image. However, this feature does not work in Chrome.

Why does the hover transition not work in Chrome yet works perfectly fine in Firefox?

Is this the expected behavior? Or does Chrome not render these transitions correctly?

Problem courtesy of: railgun

Solution

The problem is related to the :before pseudo class. It doesn't seem like hover is being triggered on that class. If you remove it, it works just fine.

.tint {
 -moz-transition: all .3s linear;
 -webkit-transition: all .3s linear;
 -ms-transition: all .3s linear;
 -o-transition: all .3s linear;
 transition: all .3s linear;
}
.tint:hover{background:rgba(159,182,205,0.1);}

Here is the jsFiddle - http://jsfiddle.net/qGAn9/

UPDATE:

If :before pseudo element is needed, then you can trigger the hover on the parent element. I also had to add some additional styles to make the pseudo element appear on top.

.tint:before {
     -moz-transition: all .3s linear;
     -webkit-transition: all .3s linear;
     -ms-transition: all .3s linear;
     -o-transition: all .3s linear;
     transition: all .3s linear;

    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
}

.tint:hover:before{background:rgba(159,182,205,0.5);}

jsFiddle here - http://jsfiddle.net/qGAn9/2/

Solution courtesy of: Hai Nguyen

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Why does this hover transition not work in Chrome?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×