3

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

js问题

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

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

我的css3动画的jsfiddle

这是其中包含我的 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 的实时预览中看起来有点不同于在我的网站上）。

4

1 回答 1

0

顶部菜单的第三个“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>
于 2013-04-18T08:37:44.233 回答