为什么悬停时不透明度变化会使第二行中的flex子项移动/更改？

Question

嘿，大家看看这个例子。 （全屏查看）您可以看到元素在悬停时改变不透明度。

然而，弹性包装到第二行的弹性项目似乎使用相同的悬停移动或改变高度...它看起来像一个弹跳效果。没有什么应该是不同的，但不透明。我尝试在转换中仅针对不透明度，尝试flex：0 0 23％;所以链接不应该改变大小，但仍然得到相同的结果。

基本上，因为我添加了不透明度悬停/过渡，第二行弹性项目会在悬停时反弹。

发生了什么事？

＆＃13;

＆＃13;

.nav-dropdown {
  display: block;
  width: 100%;
  max-width: 980px;
  padding: 30px;
  background-color: #fbfbfb;
}

.nav-dropdown-image-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.image-link {
  flex: 0 1 23%;
  margin-bottom: 20px;
}

.image-link a {}

.image-link a img {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  opacity: 1;
  transition: 0.3s;
}

.image-link a img:hover {
  opacity: 0.9;
}

＆＃13;

<div class="nav-dropdown">
  <div class="nav-dropdown-image-links">
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用以下样式

.image-link * {
    -webkit-backface-visibility: hidden;
}

这link解释了我们为什么需要它。

＆＃13;

＆＃13;

.nav-dropdown {
  display: block;
  width: 100%;
  max-width: 980px;
  padding: 30px;
  background-color: #fbfbfb;
}

.nav-dropdown-image-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.image-link {
  flex: 0 1 23%;
  margin-bottom: 20px;
}

.image-link a {}

.image-link a img {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  opacity: 1;
  transition: 0.3s;
}

.image-link a img:hover {
  opacity: 0.9;
}
.image-link * {
    -webkit-backface-visibility: hidden;
}

＆＃13;

<div class="nav-dropdown">
  <div class="nav-dropdown-image-links">
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;