悬停父元素时在子元素上触发过渡

Question

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

这是它正常工作的示例，但仅在悬停时有效。

但当我停止悬停时它会突然关闭，而不是向上滑动。

我试过将 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>

Answer 1

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

-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;

只是一个想法。

Answer 2

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

在元素本身上设置过渡，因此当您将其悬停时 returns 到带有过渡的原始状态...

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

Answer 3

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

版本上复制错误

悬停父元素时在子元素上触发过渡

Trigger transition on child element, when hovering parent

html

css

transition