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 に答える