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

CSS3 sibling selector hover

CSS3 sibling selector hover

Problem

I have a problem with css3 and html5. So I decided to make a css effect when hover column div, column icon starts spinning. But i can't do it. So where is my problem? http://goo.gl/BLXDF9/

Problem courtesy of: mantisltu

Solution

really simple fix, just remove sibling selector from spin.

.column:hover .spin{
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

http://jsfiddle.net/ymUZj/

Solution courtesy of: Shalom Aptekar

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

CSS3 sibling selector hover

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×