html - CSS3 ignore Child element when animating

Question

I am trying to scale a div containing a child div (with css background image) on hover. When I scale the div, the child div is also scaled. How can I get the child div to not inherit the animation of the parent? See my structure and fiddle here:

<div style="background:#000;">
    <div class="icon-wrap icon-effect">
       <a href="#">
          <div class="icon">
              <div class="arrow-down"></div>
          </div>
       </a>
    </div>
</div>

http://jsfiddle.net/B8bGE/

Answer 1

我通过执行以下操作解决了这个问题：

    <div class="icon-wrap icon-effect"> <a href="#">
                                            <div class="icoback">
                                            <div class="icon">
                                            </div>
                                                <div class="arrow-down"></div>
                                            </div>
                                        </a>

    </div>

然后将一些 css 应用到 .icoback。有关详细信息，请参见小提琴：http: //jsfiddle.net/xtW22/2/