css3 - CSS 3 hover issue -


i have div in sidebar. whole div link takes part of website.

now, there small flower image in left side of div, background image. when hover div flower should

  1. rotate
  2. fade in , out.

if apply animation on entire div, div rotate, not background image. solved this: flower in absolutely positioned div , rotates , fades in , out continuously (if apply animation :hover rotates when hover directly on image.)

is 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: 1s;     -o-transition: 1s;     -webkit-transition: 1s;     transition: 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 aware using pseudo selector pseudo selector little buggy in browsers, instead can this:

html

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

css

#foo:hover > div.flower ... 

Comments

Popular posts from this blog

Winapi c++: DialogBox hangs when breaking a loop -

vb.net - Font adding using PDFsharp -

javascript - jQuery iScroll clickable list elements while retaining scroll? -