透明背景图像的CSS颜色过渡行为

Question

我注意到在具有透明背景的图像上使用CSS颜色变换会产生意想不到的效果。下面是一个示例：

:root {
  --size: 4em;
  --duration: 5s;
}
html, body {
  margin: 0;
  background: slategray;
  color: white;
}
.main-menu {
  overflow: hidden;
  background: black;
}
.main-menu *:hover {
  background: skyblue;
  -webkit-transition-duration: 5s;
  transition-duration: var(--duration);
}
.image-div {
  float: right;
  padding: calc(var(--size) / 2);
  -webkit-transition-duration: 5s;
  transition-duration: var(--duration);
}
.image {
  max-width: var(--size);
}

<div class="main-menu">
  <div class="image-div">
    <img class="image" src="https://s4.postimg.org/5zy6kjqcd/maximize.png"/>
  </div>
</div>

总而言之，问题是这样的。如果将鼠标悬停在image div div的填充上，则此div的背景色和包含的image div以与预期相同的速率执行颜色转换。但是，如果将鼠标悬停在图像div上，其颜色的过渡速度似乎略快于图像div div的颜色。

鉴于我能够在Firefox、Chrome、Safari和Edge上重现这种确切的行为，我觉得这是预期的行为，但我想了解为什么会发生这种情况。

Answer 1

鉴于我能够在Firefox、Chrome、Safari和Edge上重现这种确切的行为，我觉得这是预期的行为，但我想了解为什么会发生这种情况。

发生这种情况的原因是，img变换会拾取图像div变换后的颜色，因此会更快变亮。

简而言之，image-div从纯黑变为纯黑，而img从黑色变为天蓝色。

此外，由于在到达img之前将鼠标移动到图像div上，因此转换会在之前开始，尽管延迟取决于将鼠标移动到img的速度

Answer 2

当您将鼠标悬停在img上时，会触发两个悬停事件，一个在img上，另一个在其父图像div上，当您在中使用时。主菜单*：悬停选择器：

相反，仅在image-div上使用悬停，如下所示：

.main-menu .image-div:hover {
  background: skyblue;
}

现在转换的区别将不存在-请参阅下面的演示：

html, body {
  margin: 0;
  background: slategray;
  color: white;
}
.main-menu {
  overflow: hidden;
  background: black;
}
.main-menu .image-div:hover {
  background: skyblue;
}
.image-div {
  float: right;
  padding: calc(4em / 2);
  -webkit-transition-duration: 5s;
  transition-duration: 5s;
}
.image {
  max-width: 4em;
}

<div class="main-menu">
  <div class="image-div">
    <img class="image" src="https://s4.postimg.org/5zy6kjqcd/maximize.png"/>
  </div>
</div>