CODEWITHSUNDEEP
csscss-transforms
mashby
mashby

Reputation: 13

Rotate Child Element From Parent:Hover

Just a small element that I can't seem to figure out and I'm hoping the collective knowledge here can point me in the right direction.

I'd like to rotate an image inside of a div when the user hovers over the div. An example of the code can be found here: http://jsfiddle.net/mashby/eCzmj/

Right now, the animation is triggered by hovering over the image itself, not the entire div.

Don't know if it's possible to do what I'm wanting to do, but thanks in advance for any confirmations, or suggestions!

Upvotes: 1

Views: 2347

Answers (2)

Germán Martínez
Germán Martínez

Reputation: 74

It seems to be a problem with your CSS

You're using #animate img:hover which means that you will apply the styles to the img when it's hovered.

Try instead #animate:hover img to apply the styles to the img element when the parent (#animate) is hovered.

Upvotes: 2

lpd
lpd

Reputation: 2337

It is possible. General idea:

#btnAgendaSettings img, #btnMinutesSettings img {
    transform: inherit;
}

.button-gray:hover, .button-gray:focus {
    transform: rotate(360deg);
}

Upvotes: 0

Related Questions