悬停父元素时在子元素上触发过渡 [英] Trigger transition on child element, when hovering parent

问题描述

我有一个菜单，我想使用 css3 为其设置动画.当您将鼠标悬停在主菜单时，我想在子菜单中滑动.但是我不知道把 transition 属性放在哪里，让它双向动画.

这是一个它可以正常工作的例子，但仅限于悬停.

http://jsfiddle.net/34kcamjv/

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

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

这里是CSS:

#main {位置:相对；高度:110px；宽度:100%；背景颜色:红色；}#sub {位置:相对；高度:100px；宽度:100%；背景颜色:绿色；边距顶部:-100px；z-索引:-10；//如果把过渡放在这里，什么都不会发生}#menu:hover >#sub {边距顶部:0；过渡:margin-top 0.5s 缓和；}

和 HTML:

<div id="菜单"><div id="main">MAINMENU</div><div id="sub">SUBMENU</div>

</nav>

解决方案

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

I have a menu, which I want to animate using css3. When you hover the main-menu, I want to slide in the sub-menu. However I don't know where to put the transition property, to make it animate both ways.

Here is an example of it working correctly, but only on hover in.

http://jsfiddle.net/34kcamjv/

But it just snaps off, when I end my hover, instead of sliding up.

I've tried putting the transition on the #sub element, but then nothing happens.

Here is the 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;
}

And HTML:

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

    </div>

</nav>

解决方案

This was a bug on my Chrome browser. The code worked as expected on IE11, Firefox and Chrome Canary. Other users could not replicate the bug on their versions of Chrome.

这篇关于悬停父元素时在子元素上触发过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！