Html 将鼠标悬停在父div上时停止子div上的动画

我有一个父div和一个子div。css动画设置在父div上。但问题是悬停在父div上，子div也会产生我不想要的效果

这是我的密码

<div class="wrap">
    <div style="background: url('http://www.screensavergift.com/wp-content/uploads/GoldenNature2-610x320.jpg') no-repeat; background-position: 25% 50%; background-size: cover;" class="menu_item">
        <div class="menu-box-border"></div>
    </div>
</div>

演示--

我不想把金边盒子扩大

---

非常感谢您的帮助。请提前感谢。

如果您缩放一个元素，您也将缩放其子元素。我不相信有办法解决这个问题

在这种情况下，您可以将这两个元素设置为兄弟元素，并将

：hover

添加到包装元素中：

<div class="wrap">
    <div style="background: url('http://www.screensavergift.com/wp-content/uploads/GoldenNature2-610x320.jpg') no-repeat; background-position: 25% 50%; background-size: cover;" class="menu_item">        
    </div>
    <div class="menu-box-border"></div>
</div>

---

您可以使用倒数值来抵消父级的比例：

.menu_item:hover * {
    -moz-transform: scale(.909);
    -webkit-transform: scale(.909);
    transform: scale(.909);
}

---

然而，这有一个不受欢迎的运动。最好绝对地定位子元素，使其不受父元素的影响。

是的，不幸的是

1/1.1

是一个重复的小数，所以它稍微偏离了。虽然我不确定是因为动画中的微小差异还是因为精度的降低导致了轻微的移动。谢谢你的解决方案和这个小技巧。在FF中，内盒移动了一点。是的。正如我所说。我的替代方案正是James提供的。

.menu_item:hover * {
    -moz-transform: scale(.909);
    -webkit-transform: scale(.909);
    transform: scale(.909);
}