Question

（仅适用于WEB-KIT浏览器）

我正在创建一个带有链接的导航，这些链接会变得更宽，并在您将鼠标悬停在其上时显示文字。除一个问题外，一切正常;将鼠标从按钮上移开时，文本将不会快速消失，并且按下按钮一段时间（看起来非常难看！）。

我正在努力寻找这个问题的解决方案，我尝试将跨度宽度和高度设置为0以及加快转换速度，以便文本消失得更快，但似乎都没有工作..

HTML：

<nav>
    <ul id="items">
        <li>><span class="extra"> View</span>

        </li>
        <li>+<span class="extra"> Add</span>

        </li>
    </ul>
    <div id="search">
        <input type="text" ng-model="typed" />
    </div>
</nav>

SCSS：

nav {
    width: 100%;
    padding: 6px 6px 4px 6px;
    position: fixed;
    top: 0;
    background-color: #dde;

    div {
        display: inline-block;
        float: right;
        padding: 4px 15px 4px 5px;
    }
}

ul#items {
    float: left;

    li {
        display: inline-block;
        padding: 5px 10px;
        background-color: #eef;
        color: #99a;
        width: 10px;
        height: 20px;
        overflow: hidden;
        -webkit-transition: width 0.2s linear, color 0.5s linear, background-color 0.5s linear;
    }
    li:hover {
        background-color: #ccd;
        color: #778;
        width: 45px;
        cursor: pointer;
    }
    li:hover span {
        opacity: 1;
        visibility: visible;
    }
    span {
        opacity: 0;
        font-size: 14px;
        padding-left: 8px 5px;
        -webkit-transition: opacity .25s linear, visibility .1s linear .3s;
        visibility: hidden;
    }
}

Answer 1

如果添加#items li{ white-space: pre; }，li的内容将不会换行，并且+会在+增长后变为可见，并且在缩小时会消失而没有毛刺。

请参阅Fiddle

SCSS转换上的文本重叠

1 个答案: