Question

我有博客文章，其中包含悬停时放大的图像集。我的问题是，当我放大元素并且它与后面的页面渲染顺序中的其他图像重叠时，则下一个图像位于放大元素的顶部。

停止此操作的简单方法是给出某种z-index：hover伪选择器。但是当我停止徘徊我的图像然后下一个在它上面几分之一时，我有非常讨厌的问题。

您可以在this imgur album或jsfiddle上看到行为（悬停第一张图片）

总之，我有关于悬停效果的css：

.photo-exp
{
position: relative;
transition: all .4s ease-in-out; 
/* some properties deleted which have no connection to hovering effect */
}

.photo-exp:hover
{
transform: scale(1.7); 
z-index : 10;
}

使用javascript和setTimeout函数可以很容易地产生相同的效果。

但是我想避免使用javascript解决方案并且有一些CSS解决方法，它会在悬停结束后及时改变z-index。

我尝试过CSS转换，但它没有工作我试过eddit this snippet但是我无法按照我想要的方式工作。

Answer 1

您需要指定一个新的transition-delay属性，并在悬停开始后立即将其删除。这样，即使鼠标消失，z-index也可以持续一段时间。这有点违反直觉;我希望延迟应该添加悬停和删除悬停，但相反的工作在chrome：

＆＃13;

.expander {
  position: absolute;
  left: 50%; top: 50%;
  width: 100px; height: 100px;
  margin-top: -50px; margin-left: -50px;
  z-index: 1;
  transition: transform 400ms 0ms, z-index 0ms 400ms; /* That final "400ms" delays the z-index transition! */
}
.expander:hover {
  transform: scale(1.8);
  z-index: 2; /* A hovered expander is always on top */
  transition: transform 400ms 0ms, z-index 0ms 0ms; /* Remove the z-index transition delay on hover. This is counter-intuitive but works. */
}
.expander:nth-child(1) {
  margin-left: -105px;
  background-color: #a00000;
}
.expander:nth-child(2) {
  margin-left: 5px;
  background-color: #00af00;
}

＆＃13;

<div class="expander"></div>
<div class="expander"></div>

＆＃13;

请注意（除非你试图快速鼠标移动以便打破它），当它们展开时，方块都不会渗透到另一个，甚至是框架。

Answer 2

我终于设法自己解决了我的问题。在我看来，它比@Gershom Maes更直观。

Fiddle

我用动画系统来达到效果。

@keyframes nohovering {
  0%   { z-index: 9; }
  100% { z-index: 1; }
}

@keyframes hovering {
  0%   { z-index: 10; }
  100% { z-index: 10; }
}

默认情况下，第一个将在选择器上触发，而不是：像这样悬停 animation: nohovering 0.9s;

它将保证在我完成悬停后，它将从z-index 9平滑下来到z-index 1.悬停后我的图像将位于其他图像之上。当我测试它的z-index 10为0％时，当我试图同时悬停2张图像然后只悬停其中的1张时，我有一点小故障。

对于我使用的悬停选择器：
animation: hovering 0.1s infinite;

它只会在z-index 10上循环我的图像。在悬停时它将始终位于其他图像之上。动画时间短，保证在最大时间0.1秒内停留后停止播放。

删除正常的静态z索引后，它可以正常工作。

悬停在图像上结束后，缓慢更改z-index值

2 个答案: