Question

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

js problem

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

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

这是我的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'已经扩展了宽度，因此当您将光标移动到'extralinks'菜单时，后者不会滑出视图。

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

js滑动菜单帮助 - 中间的动画延迟？

1 个答案: