3

このコードについて少し助けが必要です。メニューを作成しようとしています。私はこれをjsFiddleで示しました

私の問題は、ボタン（実際にはボタンではありません）にカーソルを合わせると、ボタンが動き続けることです。ボタンを現在の場所に保持するには、どのような方法を使用できますか？

これが私のコードの一部です

    <div id="start_bar">
        <div id ="start_button">
    Test

            <div id="nav">
            Hello World
            </div>

        </div>
    </div>

およびcss

    #start_button{
height:48px;
width:48px;
background-image:url('images/start.png');
color:white;
}
#start_button:hover  {
height:48px;
width:48px;
background-image:url('images/start.png');
margin-top: -18px;
}

#nav {
    display: none;
}
#start_button:hover > #nav {
display: block;
width: 70px;
height: 150px;
margin-top: -150px;
background-color: grey;
}
4

4 に答える 4

3

:hover疑似セレクターを削除します。

#start_button:hover {
  margin-top: -18px;  /* This causes it to shift up */
}

それがなくても、問題なく動作します：http: //jsfiddle.net/qkGR4/3/

于 2013-01-13T01:25:32.850 に答える
3

margin-topから属性を削除します#start_button:hover

于 2013-01-13T01:25:56.523 に答える
1

margin-topから属性を削除し、高さ#start_button:hoverを増やします。#start_button:hover > #nav

#start_button:hover  {
    height:48px;
    width:48px;
    background-image:url('images/start.png');
}
#start_button:hover > #nav {
    display: block;
    width: 70px;
    height: 131px;
    margin-top: -150px;
    background-color: grey;
}

http://jsfiddle.net/qkGR4/5/

于 2013-01-13T01:29:27.083 に答える
1

メニューを所定の位置に移動するために使用margin-top: -Xpx;する代わりに、絶対に配置するようにしますleft: 0; bottom: 100%;。これは機能し、メニューまたはメニューバーのピクセルの高さを入力する必要はありません。

デモ

一般に、要素の高さを設定することは避けたいと思います。要素の高さは、できるだけ頻繁にコンテンツによって決定される必要があります。または、この場合、position: absolute; bottom: 100%;要素を相対座標系の高さの100％上に移動させます…position: absolute;また、要素をドキュメントフローから解放します。その後、メニューは必要に応じて「より高く」成長することができます。

于 2013-01-13T02:09:42.113 に答える