0

これを行うにはもっと良い方法があるかもしれませんが、私がやろうとしているのは、マウスをリンクの上に置くと、左から背景色がスライドインするということです。しかし、私が問題を抱えているのはcssです。リンクがあり、リンクにはスパン (背景色を含む) があります。その後、次のようなテキストがあります。

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

何が起こっているかというと、テキストがスパンの後ろに表示されています。スパンの前にテキストを移動しようとしましたが、それもうまくいきません。これを修正するにはどうすればよいですか?

for each セットも持っていますが、z-indexまだ機能しません。

これがフィドルです：http://jsfiddle.net/h5rnj/

4

3 に答える 3

2

z-indexを.nav-links a spanから1に減らすだけで機能し-1ます。

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

jsフィドル

これが機能するのは、z-indexスタックを使用するたびにz-index、独立した「スタック コンテキスト」が確立されるためです。には.nav-links aがあるz-index: 2ため、 を含むその中のすべては、それspanに対して相対的です。古いものz-indexは1で、リンク テキストauto(0、相対値) よりも優れています。ここで、負z-indexの を使用すると、spanは同じ要素内のリンク テキストよりも低くなります。

z-index動作は常に追加するほど単純ではないことに注意してください。各スタッキング コンテキストは、z-index値が相互に相対的な意味しか持たない新しいドメインを確立します。たとえば、このページでは、赤div.sub-oneは親の上にあり、赤はdiv親の上にありますが、上にあり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 に答える