悬停父元素时触发子元素的转换答案

【问题标题】：Trigger transition on child element, when hovering parent悬停父元素时触发子元素的转换
【发布时间】：2015-04-16 03:29:03
【问题描述】：

我有一个菜单，我想使用 css3 对其进行动画处理。当您悬停主菜单时，我想在子菜单中滑动。但是我不知道将transition 属性放在哪里，以使其具有双向动画效果。

这是一个正常工作的示例，但仅在悬停时。

http://jsfiddle.net/34kcamjv/

但它只是在我结束悬停时突然关闭，而不是向上滑动。

我尝试将transition 放在#sub 元素上，但没有任何反应。

这是css：

#main {
    position: relative;
    height: 110px;
    width: 100%;
    background-color: red;
}

#sub {
    position: relative;
    height: 100px;
    width: 100%;
    background-color: green;
    margin-top: -100px;
    z-index: -10;
    //If transition is put here, nothing happens
}

#menu:hover > #sub {
    margin-top: 0;
    transition: margin-top 0.5s ease;
}

还有 HTML：

<nav>
    <div id="menu">
        <div id="main">MAINMENU</div>
        <div id="sub">SUBMENU</div>

    </div>

</nav>

【问题讨论】：

你确定你没有做错，错字或类似的事情吗？因为这个jsfiddle 工作正常，所以transition: margin-top 0.5s ease; 被放置在//If transition is put here, nothing happens
@LongInt：正确的位置仅在#sub 上。如果您没有犯任何其他错误，它应该可以工作。 Here 是一个示例。
这对我不起作用。在最新的 Chrome、Windows 7 上。但它在 Firefox 和 IE 中确实有效....那么一定是 Chrome 的东西。
@LongInt：我正在使用最新的 Opera，它也使用 Webkit，所以我很惊讶它在 Chrome 上不起作用。
刚刚在 Windows 8.1 上签入了最新的 Chrome 版本（版本 42.0.2300.2 dev-m），它确实可以工作。

标签： html css transition

【解决方案1】：

http://jsfiddle.net/34kcamjv/4/

在元素本身上设置过渡，因此当您取消悬停时，它也会通过过渡返回到原始状态...

#menu > #sub {
    transition: margin-top 0.5s ease;
}

【讨论】：

【解决方案2】：

您是否尝试过使用适当的供应商前缀添加过渡？

-webkit-transition: margin-top 0.5s ease;
-moz-transition: margin-top 0.5s ease;
-o-transition: margin-top 0.5s ease;
transition: margin-top 0.5s ease;

只是一个想法。

【讨论】：

【解决方案3】：

这是我的 Chrome 浏览器的错误。该代码在 IE11、Firefox 和 Chrome Canary 上按预期工作。其他用户无法在他们的 Chrome 版本上复制该错误。

【讨论】：

您在问题中的示例仅向一侧滑动，我的答案中的示例是否向两侧滑动？
在发布问题之前我已经尝试过您的解决方案（正如我在代码中指出的那样）。您的代码在我的 Chrome 浏览器（但在所有其他浏览器）上不起作用 - 这就是为什么我断定这是我的浏览器，它的行为很奇怪。