CODEWITHSUNDEEP
google-chromecsscss-transitions
user1585455
user1585455

Reputation:

Why does this hover transition not work in Chrome?

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?

Upvotes: 0

Views: 2758

Answers (1)

Hai Nguyen
Hai Nguyen

Reputation: 4059

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/

Upvotes: 2

Related Questions