悬停在span和css3上

Question

我刚刚为我的菜单创建了一个悬停，但我对＆＃34; span＆＃34;有疑问。

我无法将宽度设置为100％，因此我会看到按钮中的所有文字。 我知道可以严格设置宽度，但应该从文本宽度继承。

任何人都可以帮助我吗？

感谢。

jsfiddle.net/35ufuzw4 /

Answer 1

我认为你让它变得比它需要的要复杂得多。这是你的小提琴的更新版本：

DEMO

<强> HTML：

<a href="#" class="navi">Home</a>
<a href="#" class="navi">About</a>

<强> CSS：

* {
    box-sizing: border-box;
}
.navi {
    float: left;
    text-decoration: none;
    position: relative;
    color: #000;
    font-size: 14px;
    padding: 0 20px;
    line-height: 40px;
}
.navi:hover {
    color: #582d1d;
}
.navi:before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-color: #000;
    -webkit-transition: all 0.4s cubic-bezier(0.05, 0.06, 0.05, 0.95);
    transition: all 0.4s cubic-bezier(0.05, 0.06, 0.05, 0.95);
}
.navi:hover:before {
    top: 0;   
}

以下是它的工作原理：

我们不使用大量无关标记，而是使用伪元素保持语义。 ::before伪元素的位置设置为绝对值，因此当其top / left / right / bottom属性都设置为0时，它将填充其位置设置为relative的.navi元素的空间。将其最高位置设置为100％意味着我们将把顶部一直移到底部。这允许您在悬停时将顶部设置为0，并使背景颜色从下往上显示。

.navi类本身应用于锚标记，因此由于锚标记是内联的，我们可以浮动这个元素并给它一些左右填充。使用line-height，您可以控制元素的高度，并确保其中的文本在中心垂直对齐。添加一个悬停伪类，当背景“增长”后，你可以改变它的颜色。