Переход скользящий подчёркнутый прыжок

Я пытаюсь использовать переход CSS, чтобы иметь скользящее подчеркивание на одной из моих страниц (на hover подчеркивание слайдов слева направо). Я использую его сразу для нескольких элементов li:

#menu li{
    border-bottom:2px solid transparent;
    width:0px;
    transition:0.8s ease;
    white-space:nowrap;
}
#menu li:hover{
    border-bottom:2px solid #FFE5C7;
    width:100%;
}

Что работает, подчеркивание исчезает и скользит, чтобы подчеркнуть элемент списка. Проблема в том, что тексты элементов списка имеют разную длину, и почему-то после наведения курсора на более длинную строку текста, а затем перехода на более короткую li, переход увеличит подчеркивание до длины предыдущего элемента, а затем защелкнет назад. Если это имеет смысл... пример:

Главная
Свяжитесь со мной

Если я сначала наведу курсор на «Свяжитесь со мной», подчеркивание сработает. Если я затем перейду к «Домой», подчеркивание вырастет до длины подчеркивания «Свяжитесь со мной», а затем вернется обратно. Не уверен, почему, не нашел решения, которое работает. Я не хочу устанавливать ширину на определенное количество пикселей, я хочу только подчеркнуть сам текст.


css css-transitions sliding underline
person JBoss    schedule 01.12.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Согласно вашему коду, все элементы списка будут иметь одинаковую ширину 100%, что нормально, но затем убедитесь, что вы применяете анимацию к ссылке внутри элемента списка, а не к самому элементу списка. Попробуйте это вместо этого:

#menu ul li > a{
    position: relative;
    -o-transition:0.8s ease;
    -ms-transition:0.8s ease;
    -moz-transition:0.8s ease;
    -webkit-transition:0.8s ease;
    transition:0.8s ease;
    white-space:nowrap;
}

#menu ul li > a:before {
    content: "";
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #FFE5C7;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

#menu ul li > a:hover:before {
    visibility: visible;
    width: 100%;
}

Ваш HTML должен выглядеть так:

<nav id="menu">
    <ul>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Contact Me</a>
        </li>
    </ul>
</nav>
person Nat Meerbaum    schedule 01.12.2015
comment
Работал как шарм! Огромное спасибо - person JBoss; 02.12.2015