嘿伙计们看看这个例子。 (看全屏)你可以看到元素在悬停时改变不透明度。
然而,flex-wrap 到第二行的 flex items 似乎随着相同的悬停移动或改变高度......它看起来像弹跳效果。除了不透明度,应该没有什么不同。我试过在我的过渡中只针对不透明度,试过 flex: 0 0 23%;所以链接不应该改变大小,但仍然会得到相同的结果。
基本上,因为我添加了不透明度悬停/过渡,第二行 flex 元素在悬停时弹跳。
这是怎么回事?
.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;
}
<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>
最佳答案
使用下面的样式
.image-link * {
-webkit-backface-visibility: hidden;
}
这link解释我们为什么需要它。
.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;
}
<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>
关于html - 为什么悬停时不透明度的变化会使第二行的 flex children 移动/改变?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50515050/