1

大きくなり、それに隣接する他のリスト項目との間にギャップを作成するためのマージンを取得するナビゲーション リスト項目 (水平に配置) にカーソルを合わせると、ホバーされた項目がホバー前の位置の中心に留まるようにするにはどうすればよいですか?隣接するアイテムが左右に広がりますか? 以下は、これまでのコードです ( CodePenで確認することもできます)。

ありがとう、TJ

#nav {
        list-style: none;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 15px;
        right: 15%;
        font-weight: bold;
        }

        #nav:hover {
            }

        #nav li {
            float: left;
            padding: 5px 10px;
            text-align: center;
            }

            li:first-child {
                border-top: 4px solid white;
                border-right: 2px solid white;
                border-bottom: 4px solid white;
                border-left: 4px solid white;
                }

            li:nth-child(2) {
                border-top: 4px solid white;
                border-right: 2px solid white;
                border-bottom: 4px solid white;
                border-left: 2px solid white;
                }

            li:nth-child(3) {
                border-top: 4px solid white;
                border-right: 2px solid white;
                border-bottom: 4px solid white;
                border-left: 2px solid white;
                }

            li:nth-child(4) {
                border-top: 4px solid white;
                border-right: 4px solid white;
                border-bottom: 4px solid white;
                border-left: 2px solid white;
                }

        #nav li:hover {
            box-shadow:
                2px 2px 6px rgba(0, 0, 0, 0.2),
                -2px -2px 6px rgba(0, 0, 0, 0.2),
                -2px 2px 6px rgba(0, 0, 0, 0.2),
                2px -2px 6px rgba(0, 0, 0, 0.2);
            z-index: 5;
            text-align: center;
            background-color: white;
            color: black;
            border: 4px solid rgba(0, 0, 0, 0.2);
            font-size: 1.2em;
            margin: 0 10px;
            }
4

2 に答える 2

1

少し操作が必要ですが、これを行うコードは次のとおりです: http://codepen.io/anon/pen/cIEno . ホバーされた要素を中央に保つために他の要素を移動する必要があるため、これには jQuery が必要であることに注意してください。

于 2013-03-21T19:30:54.273 に答える
1

私はCSSのみを使用してそれを行いました。したがって、キーは使用することです：

display: inline;

li で、ul を div でラップすると、次のことが可能になります。

text-align: center;

中心になったので、中心から成長します。ここで変更を加えました - http://codepen.io/anon/pen/uIdsr

于 2013-03-21T19:44:29.383 に答える