Как сохранить элемент горизонтального навигационного списка, размер которого увеличивается при наведении курсора на его место до наведения?

При наведении курсора на элемент списка навигации (расположенный горизонтально), который становится больше и получает поле, чтобы создать зазор между ним и другими элементами списка, смежными с ним, как вы делаете так, чтобы наведенный элемент оставался в центре своего положения до наведения, в то время как соседние предметы расходятся влево и вправо? Ниже приведен код, который у меня есть (вы также можете проверить его на CodePen).

Спасибо, ТиДжей

#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;
            }

html css hover nav
person tjfwalker    schedule 21.03.2013    source источник
comment
К сожалению, для этого вам понадобится javascript.   -  person dezman    schedule 21.03.2013

Ответы (2)


arrow_upward
1
arrow_downward

Я сделал это, используя только CSS. Итак, ключ в том, чтобы использовать:

display: inline;

на li и обернуть ul в div, что позволит вам:

text-align: center;

Теперь, когда он центрирован, он будет расти из центра. Я внес изменения здесь - http://codepen.io/anon/pen/uIdsr.

person Martyn0627    schedule 21.03.2013
comment
Спасибо чувак. Мне нравится чистый ответ CSS. Это забавно, потому что я вкратце изучил display: inline; идея, но я не думал использовать внешний div и центр внутри, поэтому я не думал, что это правильный путь. Однако остается одна проблема с display: inline; — это пространство, которое добавляется между элементами строки, когда они не наведены. Я не могу понять, как его удалить. Спасибо - person tjfwalker; 22.03.2013
comment
Сделанный. Есть какие-нибудь мысли по поводу этого пространства между позициями? - person tjfwalker; 22.03.2013
comment
У меня не было возможности изучить это полностью, но поле -4px на li было бы быстрым решением. Завтра посмотрю и сообщу, есть ли лучшее решение. - person Martyn0627; 22.03.2013

arrow_upward
1
arrow_downward

Пришлось немного повозиться, но вот код, который сделает это за вас: http://codepen.io/anon/pen/cIEno. Обратите внимание, что для этого требуется jQuery, так как вам нужно перемещать другие элементы, чтобы зависший элемент оставался в центре.

person Wes Cossick    schedule 21.03.2013
comment
Спасибо за это. Хотя я ничего не знаю о js, ваш исправленный проделал большую работу. - person tjfwalker; 22.03.2013