Question

我正在尝试使用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，过渡将使下划线增加到之前的长度项目，然后快照回来。如果这是有道理的......例如：

主页
联系我

如果我首先将鼠标悬停在“与我联系”上，则下划线有效。如果我然后移动到“Home”，则下划线增长到“Contact Me”下划线的长度，然后快速向后移动。不知道为什么，还没有找到有效的解决方案。我不想将宽度设置为特定的像素数，我只希望文本本身加下划线。

Answer 1

根据您的代码，所有列表元素将具有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>

过渡滑动下划线

1 个答案: