文本显示在span后面

时间:2013-07-26 15:17:16

标签: css

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

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

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

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

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

3 个答案:

答案 0 :(得分:2)

如果您将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)都与此相关。旧的spanz-index,超过了链接文本的1(相对而言为0)。现在,如果结果为auto,则z-index低于同一元素中的链接文字。

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

答案 1 :(得分: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; 
}

答案 2 :(得分:1)

更改z-index

span

as

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

JSFiddle

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