Question

也许有更好的方法可以做到这一点，但我要做的是当您将鼠标悬停在链接上时，背景颜色从左侧滑入。但我遇到的问题是css。我有一个链接，在链接中有一个span（包含背景颜色）。之后有文字就像这样：

<a href="/info/about"><span></span>About</a>

发生了什么，是文本显示在跨度后面。我试过在跨度前移动文本，但这也不起作用。我该怎么做才能解决这个问题？

我的每一组都有z-index，但它仍然无效。

这是小提琴：http://jsfiddle.net/h5rnj/

Answer 1

如果您将z-index的{{1}}从.nav-links a span减少到1，则会有效。

-1

jsFiddle

它的工作原理是z-index堆栈 - 每次使用.nav-links a span{ z-index: -1; }都会建立一个独立的“堆叠上下文”。 z-index有一个.nav-links a，因此其中的所有内容（包括您的z-index: 2）都与此相关。旧的span为z-index，超过了链接文本的1（相对而言为0）。现在，如果结果为auto，则z-index低于同一元素中的链接文字。

请注意，行为并不像span总是添加那么简单。每个堆叠上下文建立一个新域，其中z-index值仅相对于彼此具有意义。例如，在this page上，红色z-index位于其父级和div.sub-one之上，其父级位于其上方，即使其div为z-index }。

Answer 2

将.nav-links a span更改为z-index: -1。另外，这是CSS3中的动画：http://jsfiddle.net/h5rnj/10/

CSS：

.nav-links a span{
    display: block;
    background-color: #808080;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -100%;
    z-index: -1;
    transition: all 1s ease-in; 
}
.nav-links a:hover span{
    left: 0;
    transition: all 1s ease-in; 
}

Answer 3

更改z-index

的span

as

.nav-links a span {
z-index: -1
}

JSFiddle

检查此Why does z-index: -1; appear above z-index: 1;?

文本显示在span后面

3 个答案: