Question

我有一个父母和一个孩子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/

我不希望扩展黄金边框。

非常感谢任何帮助。谢谢。

Answer 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/

Answer 2

您可以使用倒数值来反算父级的比例：

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

<强> Demo

但是，这有一个不受欢迎的运动。最好绝对定位子元素，使其脱离父元素的影响。

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

2 个答案: