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的背景颜色和包含的图像 div将按照预期以相同的速率执行颜色过渡。但是，如果将鼠标悬停在图像 div上，其颜色的转换速度会比 image-div div的颜色稍快一些。

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

Answer 1

当您悬停而不是img 时，会触发两个悬停事件 - 一个位于img，一个位于其父image-div在*选择器中使用.main-menu *:hover时：

而是使用image-div上的悬停，如下所示：

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

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

此外，由于您在image-div之前移动鼠标到img之前，转换开始之前，尽管延迟是基于您将鼠标移动到{{1}的速度}}

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

2 个答案: