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

CSS transitions on child element when hovering the parent

CSS transitions on child element when hovering the parent

Problem

I'm trying to figure out how to "animate" the child of a hovered element. How is this so complicated to get it work across multiple browsers?
what's the best practise?

.parent {
    -moz-transition:-moz-transform 180ms;
    -webkit-transition:-webkit-transform 180ms;
    -o-transition:-o-transform 180ms;
    transition:transform 180ms;
}
.parent:hover > .child {
    transform: translate(0,-42px);
}

http://jsfiddle.net/KKrdA/2/ works in firefox
or

.parent {
    -moz-transition:top 180ms;
    -webkit-transition:top 180ms;
    -o-transition:top 180ms;
    transition:top 180ms;
}
.parent:hover > .child {
   top:-42px;
}

http://jsfiddle.net/KKrdA/1/ works with webkit browsers

Problem courtesy of: yardarrat

Solution

transform is not cross browser compatible you still have to target specific browsers.

.parent:hover > .child {
    transform: translate(0,-42px);
    -webkit-transform: translate(0,-42px);
    -moz-transform: translate(0,-42px);
    -o-transform: translate(0,-42px);
    -ms-transform: translate(0,-42px);
}
Solution courtesy of: raam86

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

CSS transitions on child element when hovering the parent

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×