CSS 3 hover issue [closed]

Question

I have a div in the sidebar. The whole div is a link which takes you to another part of the website.

Now, there is this small flower like image in the left side of the div, background image. When you hover the div the flower should

1. rotate
2. fade in and out.

If I apply the animation on the entire div, the div will rotate, not the background image. So I solved it like this: the flower is in an absolutely positioned div and rotates and fades in and out continuously (if I apply the animation to the :hover then it rotates only when I hover directly on the image.)

Answer 1

Is this what you want?

http://jsfiddle.net/kgFdJ/2/

#foo {
    width: 300px;
    height: 500px;
    background-color: #eee;
    position: relative;
}

#foo:after {
    content: "";
    width: 20px;
    height: 20px;
    background-color: #f00;
    position: absolute;
    top: 10px;
    left: 10px;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s
}

#foo:hover:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

But be aware that using a pseudo selector to another pseudo selector could get a little buggy in some browsers, so instead you can do something like this:

HTML

<div id="foo">
    <div class="flower"></div>
</div>

CSS

#foo:hover > div.flower ...