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

【问题标题】：Change slowly z-index value after hover has ended on image在图像上悬停结束后缓慢更改 z-index 值
【发布时间】：2017-09-17 06:02:21
【问题描述】：

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

阻止这种情况的简单方法是在 :hover 伪选择器上提供某种 z-index。但是当我停止悬停图像之后，我遇到了非常讨厌的问题，然后下一个图像在它上面停留了几分之一秒。

您可以在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 过渡，但它不起作用
我试图编辑this snippet，但我无法让它以我想要的方式工作。

【问题讨论】：

通过阅读 "CSS 解决方法将在悬停结束后及时改变 z-index" 想象你手里拿着两种颜色的东西，这绝对不清楚你想要什么纸，一红一蓝。除了你不能在物理上使一个通过另一个 - 现在，你能解释一下想要的魔法效果吗？
@RokoC.Buljan 他所说的内容比 jsfiddle 更清楚。
我想要的行为是让z-index在悬停后恢复正常，过渡效果会消失。所以在我的图像恢复正常大小并且没有悬停效果之后。
纯 css 解决方案可能很困难。在悬停物理结束后保持悬停属性一段时间是一个经典问题！
硬编码对话框的 z 索引/放大 img 高。打开和关闭对话框/缩放类。应该避免眨眼。

标签： html css

【解决方案1】：

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

.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;
}

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

请注意（除非您尝试用鼠标快速移动以破坏它）当它们展开时，任何一个正方形都不会穿过另一个，甚至对于一个框架也不会。

【讨论】：

【解决方案2】：

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

Fiddle

我已经用动画系统来实现了。

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

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

默认情况下，第一个将在没有 :hover 的选择器上触发，像这样
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.1s后自动熄灭。

删除正常的静态 z-index 后，它就可以工作了。

【讨论】：