0

私がやろうとしているのは、ユーザーが画像にカーソルを合わせると、画像が x 軸に沿って再配置され、.content. 私はz-index: 10画像に設定しz-index: 1 、画像の下になる.contentように設定しまし.contentた。しかし、.contentまだ画像の上に残っています。私を助けてください..

これが私のコードです:

html

<div class="holder">
    <img src="http://placehold.it/350x150" />
    <div class="content">
        <h3>hello there</h3>    
        <a href="#">view more</a>        
    <div/>        
</div>

CSS

.holder {
    margin-top: 130px;
    position: relative;
}
img {    
    display: block;
    transition: -webkit-transform 0.5s;
    transition: -moz-transform 0.5s;
    z-index: 10;
}
.content {
    background: blue;
    height: 100%;
    color: white;
    z-index: 1;
    position: absolute;
    top: auto;
    bottom: 0;
}
a {
    color: white;
    background: red;
    padding: 10px;
}

.holder:hover img {
    -webkit-transform: translateX(90px);
    -moz-transform: translateX(90px);
}
4

1 に答える 1

3

ここで、Jones G. Drange のおかげでコードの問題を修正しました。彼がコメントで指摘したように、「z-index は static 以外の位置を持つ要素でのみ変更できます。img にはデフォルトで position: static があります」

jsfiddle

img {    
    position: relative;
}
于 2013-06-25T06:51:33.993 に答える