0

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

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

正在发生的事情是文本显​​示在跨度后面。我曾尝试将文本移动到跨度前面，但这也不起作用。我能做些什么来解决这个问题？

我也有z-indexfor each set，但它仍然不起作用。

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

4

3 回答 3

2

如果你只是减少from到 ，z-index它就可以工作。.nav-links a span1-1

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

jsFiddle

它之所以有效是因为z-index堆栈——每次使用都会z-index建立一个独立的“堆栈上下文”。The.nav-links a有一个z-index: 2，所以它里面的所有东西，包括你的span，都是相对的。旧的z-index是1，它击败了链接文本的auto（0，相对而言）。现在，使用负数z-index，span低于同一元素中的链接文本。

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

于 2013-07-26T15:22:05.273 回答
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; 
}
于 2013-07-26T15:23:59.437 回答
1

改变z-index_span

作为

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

JSFiddle

检查这个为什么 z-index: -1; 出现在 z-index: 1 上方；?

于 2013-07-26T15:21:41.637 回答