悬停文本和底部 - 编程之家

如何解决悬停文本和底部

我的主题导航栏有问题，当只有一个词如 home 或 contact 时，您将鼠标放在上面以正确的方式悬停在世界上，但是当我向它添加一个词时，例如主页悬停也显示在主要词下方的第二个词，并且无法正常工作。这是 HTML 代码：

    <li>
    <a href="#" data-hover="ABOUT US" >ABOUT US</a> </li>

这里是 CSS 脚本：

@media (min-width:768px) {
    .menu > li > a::before,.menu .current > a::before {
        position: absolute;
        top: 25px;
        left: 20px;
        overflow: hidden;
        max-width: 0;
        color: rgb(34,171,166);
        content: attr(data-hover);
        -webkit-transition: max-width 1s ease-out;
        transition: max-width 1s ease-out;
    }
    .menu > li > a:hover::before,.menu > li > a:focus::before,.menu > .active > a {
        max-width: 100%;
        -webkit-transition: max-width 1s ease-out;
        transition: max-width 1s ease-out;
    }
}

解决方法

因此，如评论中所述：您的原始代码具有：

<a href="#" data-hover="ABOUT US" >ABOUT&nbsp;US</a> </li>

如您所见：不间断空格可防止原始文本分成两行。 data-hover 没有这个中断空间，因此它的行为不同。

您也可以添加 white-space: nowrap;，这样您就无需手动插入不间断空格。