2

当我应用变换比例时，“z-index 已更改”如何？我错过了什么？玩 transform 有什么“技巧”吗？

.thumb > a .img-cover{
    -webkit-transition: all 1.2s ease-out;border-radius:5px;
    -webkit-transform: scale(1);
}
.img-cover{
    position:relative;
    overflow:hidden;
}
.img-cover:before{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    content:"";
    box-shadow: inset 0px 0 100px #f0f;}
.thumb > a:hover img {
    -webkit-transform: scale(1.1);
} ​

HTML

<div class="container">
    <article class="thumb">
       <a href="#">
          <div class="img-cover"><img src="http://placekitten.com/300/120"/></div>
          <span>thumb-desc</span>
       </a>
    </article>
</div>​

现场演示

4

4 回答 4

0

定义z-index你自己，让它为你做这件事。

.img-cover:before{
    position:absolute;
    z-index: 10;
    top:0;left:0;right:0;bottom:0;
    content:"";
    box-shadow: inset 0px 0 100px #f0f;}
.thumb > a:hover img {
    z-index: 0;
    -webkit-transform: scale(1.1);
}

示例代码

于 2012-11-08T11:09:49.123 回答
0

设置属性时position: absolute，对象不在流中。这就是对齐方式不同并且看起来 z-index 已更改的原因。手动设置 z-index 可以解决这个问题。

于 2012-11-08T11:11:04.130 回答
0

将z-index给你的.img-cover:beforeon a:hover。像这样写：

.thumb > a:hover .img-cover:before{
    z-index:2;
}

检查这个http://jsfiddle.net/8uhNK/12/

于 2012-11-08T11:12:23.250 回答
0

您自己说过，“z-index 已更改”。所以你必须设置z-indexof.img-cover和.img-cover:before.The z-indexof.img-cover的值必须低于z-indexof .img-cover:before。

示例：http: //jsfiddle.net/skeurentjes/8uhNK/10/

于 2012-11-08T11:12:55.203 回答