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

【问题标题】：Stop animation on child div when hover over parent div将鼠标悬停在父 div 上时停止子 div 上的动画
【发布时间】：2015-03-18 04:11:31
【问题描述】：

我有一个父 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>

演示 -- http://jsfiddle.net/squidraj/4eewp8x0/

我不想扩大金色边框。

非常感谢任何帮助。在此先感谢。

【问题讨论】：

标签： html css

【解决方案1】：

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

在这种情况下，您可以将两个元素设为兄弟元素，并将 :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>

.wrap:hover .menu_item {
    -moz-transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}

http://jsfiddle.net/4eewp8x0/1/

【讨论】：

【解决方案2】：

你可以用一个倒数来抵消父级的规模：

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

Demo

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

【讨论】：

是的，不幸的是1/1.1 是一个重复的小数，所以它有点偏离。虽然我不确定是否真的是那么微小的差异或者只是动画中的舍入精度损失导致了轻微的运动。
感谢您的解决方案和这个小技巧。在FF中，内盒移动了一点。
是的。就像我说的。我的替代解决方案正是 James 提供的。