Question

所以这就是我到目前为止我正在尝试创建的标题菜单。

它完美无缺，因为我想要它除了我需要滑动的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>

Answer 1

你应该在主容器上捕捉悬停状态：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/

Slideout CSS菜单需要持久的悬停状态

1 个答案: