javascript - js滑动菜单求助——中间有动画延迟？

Question

我正在寻找一个具有某种特定功能的菜单。我对 javascript 和 jquery 比较陌生，所以我不知道从哪里开始。这是我想要它做的事情:

将鼠标悬停在链接 4 和 5 上也会继续使它们保持最终动画状态。

有什么建议吗？我尝试使用 CSS3 动画执行此操作，但在用户停止将鼠标悬停在链接 3 上然后滑回之前，我无法让它暂停。我还遇到了链接 3 和链接 4 之间的间隙导致悬停停止的问题。 Javascript 似乎是更好的选择。

jsfiddle of my css3 animations

这是包含我的 css3 动画的相关代码:

 -webkit-transition: all .2s ease 0s;
 -moz-transition: all .2s ease 0s;
 -o-transition: all .2s ease 0s;
 -ms-transition: all .2s ease 0s;
 transition: all .2s ease 0s;

编辑:我已经用我当前的 CSS3 动画的 jsfiddle 更新了它(在 jsfiddle 上的实时预览中看起来与我的网站上的有点不同)。

Answer 1

顶部菜单的第三个“li”的宽度已扩展，因此当您将光标移至“额外链接”菜单时，后者不会滑出 View 。

纯 CSS 解决方案:Jsfiddle Link

CSS:

* {
    padding:0;
    margin:0;
}
.links {
    width:100%;
}

.links > menu {
    left: 0%;
    text-align:center;
    position: fixed;
    z-index: 4;
}

.links menu li  {
    whitespace: nowrap;
    display: inline-block;
    margin-right: 30px;
    position: relative;
    padding: 0;
    height: 40px;
    top: 24px;
    z-index: 4;
    float:left;
}

.links a, a:visited {
    font-family: RobotoLight;
    text-decoration: none;
    text-transformation: none;
    weight: normal;
    font-size: 18px;
    color: #000000;
    z-index: 4;
    float:left;
    height: 100%;
}

.links a:hover {
    font-family: RobotoLight;
    text-decoration: none;
    text-transformation: none;
    weight: normal;
    font-size: 18px;
    color: #33b5e5;
    z-index: 4;
}

.l3 .extralinks {
    white-space: nowrap;
    position: fixed;
    top: 0px;
    left:100%;
    padding: 0 0 0 10px;
    text-align:center;
    height: 40px;
    width: 300px;
    z-index: 4;
    display: inline-block;
    -webkit-transition: all .2s ease 0s;
    -moz-transition: all .2s ease 0s;
    -o-transition: all .2s ease 0s;
    -ms-transition: all .2s ease 0s;
    transition: all .2s ease 0s;
    z-index: 4;
}
.l3:hover .extralinks {
    left: 50%;    
}
.l3:hover .extralinks li {
}


.links li:nth-child(3) {
    width:200px;
    margin-right:0px;
}

.links li:nth-child(3):hover > a {
    font-family: RobotoLight;
    text-decoration: none;
    text-transformation: none;
    weight: normal;
    font-size: 18px;
    color: #33b5e5;
    z-index: 4;                
    border-bottom: 3px solid #33b5e5;
}


.links li:hover > a, li:active > a {
    border-bottom: 3px solid #33b5e5;
}  

HTML:

<div class="links">
    <menu>
        <li>
            <a href="#">Link 1</a>
        </li>
        <li>
            <a href="#">Link 2</a>
        </li>
        <li class="l3">
            <a href="#">Link 3</a>
            <menu class="extralinks">
                <li>
                    <a href="#">Link 4</a>
                </li>
                <li>
                    <a href="#">Link 5</a>
                </li>
            </menu>
        </li>
    </menu>
</div>