具有透明背景的图像的 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 以相同的速率执行颜色转换，正如预期的那样。但是，如果您将鼠标悬停在 image div 上，其颜色的过渡似乎比 image-div div 的颜色稍快。

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

Answer 1

当您悬停在img上时两个悬停事件被触发 - 当您使用@987654324时，一个在img上，一个在其父级image-div上@in .main-menu *:hover 选择器：

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

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

现在transition 中的差异 将不存在 - 请参阅下面的演示：

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>

Answer 2

鉴于我能够在 Firefox、Chrome、Safari 和 Edge，我觉得这是 预期的行为，但我想了解它为什么会发生。

发生这种情况的原因是因为img 过渡选择了image-div 过渡颜色，因此变得更快。

简单地说，image-div 来自纯黑色，而img 来自黑色变成天蓝色。

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