Question

我的页面上充满了产品缩略图。将其悬停时-翻转至z-index：1，图像便会放大/放大至全尺寸。当悬停结束时，它们会缩小到正常大小，但是！立即恢复为z-index：0-看起来很奇怪，因为它发生在相邻产品的后面（而不是放大-发生在前面）。

我在这里找到了类似的问题： CSS3 - Change z-index after css3 transition ends 解决方案是通过以下方式延迟z索引转换：“ transition：opacity 1s，z-index .2s 1s;”

在我的情况下，这等于：“过渡：z-index .1s 4s，宽度1s；”即将z索引翻转延迟4秒。但这似乎不起作用。有人可以指导我我做错了什么吗？谢谢（我正在Chrome中进行测试）

我的代码是：

<style type="text/css"><!--
.style1 {background-color: #800080;}
.F1 {
    float:left; width:120px; height:123px;background:yellow; padding:0;margin:0;text-align:center; font-size:12px;
    font-weight:bold;font-family:Arial, Helvetica, sans-serif; position:relative; }
.caption {
    color:green; display:block; width:100%; position:relative;z-index:0;
    /* -webkit-transition: add throughout when solution known */
    transition: background-color 1s;
}
.I1 {
    width:120px;height:auto;<!--107px-->; opacity:1.0;
    /* -webkit-transition: width 2s;  For Safari 3.1 to 6.0 */
    /*  transition: width 2s; */
    /*  transition: z-index .1s 3s, width 2s linear; */
     border:1px red dotted;   /* border just for testing */

    }
.hoverArea { position: absolute; z-index:100; top:14px;width: 90px; min-height: 90px; opacity: 0.2; background:one; }  /* add color& opacity for testing */

.F1 > .hoverArea:hover ~ .I1 { 
    position:absolute; z-index:1;
    clip: rect(0,293px,256px,6px); width:300px; height:auto;  /*  clip = top, right, bottom, left (for 120px wide) - all from top-left  */
    left:-6px;     overflow:visible;     transition: z-index .1s 4s, width 1s;
    }
.F1 > .hoverArea:hover ~ .caption { 
    background:white; color:black; z-index:101; text-decoration:underline; cursor:pointer; 
    }   

.caption a:link  {cursor:default;  text-decoration:none; }
.caption:hover  a:link { cursor:pointer; text-decoration:underline;background:white; }

--></style>
<!-- prod -->
<div class="F1">
<div class="hoverArea"></div>
<div class="caption"><a href="../products/dgf84" target="ProdWin">Prod#1</a></div>
<img class="I1" src="https://via.placeholder.com/300x265.png" title="Prod#1">
</div>
<!-- prod -->
<div class="F1">
<div class="hoverArea"></div>
<div class="caption"><a href="../products/frog-spawn-the-4th-batch" target="Prod#1">Prod#2</a></div>
<img class="I1" src="https://via.placeholder.com/300x265.png" title="Prod#2">
</div>
<!-- prod -->
<div class="F1">
<div class="hoverArea"></div>
<div class="caption"><a href="../products/bobby-leecan-suitcase-breakdown" target="ProdWin">Prod#3</a></div>
<img class="I1" src="https://via.placeholder.com/300x265.png" title="Prod#3">
</div>
<!-- prod -->
<div class="F1">
<div class="hoverArea"></div>
<div class="caption"><a href="../products/fletcher-henderson-his-orchestra-do-that-thing" target="ProdWin">Prod#4</a></div>
<img class="I1" src="https://via.placeholder.com/300x265.png" title="Prod#4">
</div>
<!-- prod -->
<div class="F1">
<div class="hoverArea"></div>
<div class="caption"><a href="../products/its-the-best-stuff-yet" target="ProdWin">Prod#5</a></div>
<img class="I1" src="https://via.placeholder.com/300x265.png" title="Prod#5">
</div>

如何延迟z索引过渡直到宽度过渡完成

0 个答案: