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 回答