文本显示在范围后

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

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

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

我对每套都有z-index，它仍然无法工作。

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

来源

2013-07-26 Get Off My Lawn

变更.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-26 15:23:59 Prisoner

我会让它更快，这就是超慢 –

@Zeaklous，这只是一个例子。我们是谁来说他想要多快/多快？也许这个网站的树懒。 – Prisoner

我意识到这一点。我只是建议它，所以OP知道价值可以改变 –

更改span

为

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

JSFiddle

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

来源

2013-07-26 15:21:41 Praveen

它可以工作，如果你只是将.nav-links a span的z-index从1减少到-1。

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

jsFiddle

它的工作原理，因为z-index堆 - 的z-index每次使用建立一个独立的“堆积语境”。 .nav-links a有一个z-index: 2，所以它的一切，包括你的span，都是相对的。旧的z-index是1，它击败了链接文本的auto（0，相对而言）。现在，使用负数z-index,span低于同一元素中的链接文本。

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

来源

2013-07-26 15:22:05

文本显示在范围后

回答

相关问题