0

所以到目前为止，我正在尝试创建一个标题菜单。

http://jsfiddle.net/2LUSL/

除了我需要滑出的 div 在我将鼠标悬停在它们上方时保持可见之外，它可以完美地工作，因为我想要它。

原谅我缺乏理解/知识，如果之前已经回答过。

感谢您提前提供任何帮助。

我认为我可能出错的地方是我没有将我的元素放入列表中，但是当我这样做时并没有帮助。

<div id="slidecontainer">

    <div id="slideout" class="zero"></div>
    <div id="slideout" class="one"></div>
    <div id="slideout" class="two"></div>
    <div id="slideout" class="three"></div>
    <div id="slideout" class="four"></div>

</div>
4

1 回答 1

2

您应该在主容器上捕获悬停状态：http: //jsfiddle.net/2LUSL/1 

#slidecontainer {
    position: relative;
    top: 0px;
    left: 50%;
    margin-top: 0px;
    margin-left: -152px;
    height:150px;
    width:300px;
    border: 2px solid #333;
    border-radius: 0 0 300px 300px;
    -moz-border-radius: 0 0 300px 300px;
    -webkit-border-radius: 0 0 300px 300px;
    background:red;
}
#slideout {
    position: absolute;
    top: 95px;
    left: 124px;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    height:50px;
    width:50px;
    border: 1px solid #000;
    border-radius: 100px 100px 100px 100px;
    -moz-border-radius: 100px 100px 100px 100px;
    -webkit-border-radius: 100px 100px 100px 100px;
    background:green;
    line-height:50px;
    text-align:center;
}
#slideout.zero {
    z-index:1;
}
#slidecontainer:hover #slideout.one {
    left: 25px;
    top: 45px;
}
#slidecontainer:hover #slideout.two {
    left: 70px;
    top: 80px;
}
#slidecontainer:hover #slideout.three {
    left: 222px;
    top: 45px;
}
#slidecontainer:hover #slideout.four {
    left: 178px;
    top: 80px;
}

编辑：使您的容器居中：margin:auto工作正常：http: //jsfiddle.net/2LUSL/2/

于 2013-06-15T22:16:39.050 回答