悬停在图像上结束后，更改z指数值

Question

我有博客文章，其中包含一组图像，这些图像放大了。我的问题是，当我放大元素并且与其他图像重叠时，该图像以后在页面渲染顺序中，下一个图像在放大的一个图像上。

停止这种情况的简单方法是在：悬停伪选择器上提供某种Z索引。但是，当我停止徘徊在图像之后时，我有非常令人讨厌的问题，然后下一个在其上方，仅次于第二。

您可以在此IMGUR专辑或JSFiddle（悬停第一张图像）中看到行为

简而言之

.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索引。

我尝试了CSS过渡，但它不起作用
我试图擦去这个片段，但无法以我想要的方式工作。

Answer 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>

请注意，（除非您尝试非常快速地鼠标以打破它）都不会在另一个方面出血，甚至不是在框架上膨胀。

Answer 2

我也终于设法自己解决了我的问题。我认为这比@gershom Maes回答更直观。

小提琴

我已经使用动画系统来实现结果。

@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索引9到z索引。悬停在z-index 9上。悬停在我的图像之后，我的图像将位于其他图像的顶部。当我对z索引10的测试为0％时，当我尝试同时徘徊2张图像时，我有一点小故障，然后仅悬停1个。

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

它将在z索引10上循环我的图像。在悬停的情况下，它将始终位于其他图像的顶部。简短的动画时间保证它在悬停在最大时间为0.1s的时间后停止后会消失。

删除正常静态z索引后，它起作用。