Question

我现在已经在这几个小时里苦苦挣扎了，我已经用我能想到的一切重写了css，但仍然没有。

基本上我用＆lt;做了一个简单的照片网格。 ul＆gt; ，其中每个＆lt; li＆gt; 保存的图像应该是父元素宽度的 12.5％，因此每行得到 8 图片。图片的不透明度为 .2 ，并在悬停时更改为1。

这听起来非常简单，当我想到它时，我没有考虑花费超过几分钟，但事实并非如此。

问题是元素在悬停时会改变它们的比率 1px ，所以我得到 186 x 187 ，依此类推。这会导致 1px 的余量，这真的很烦人，因为它也会使图像抖动一点。

当浏览器的宽度较小时，似乎会发生更多。

现在，这是我正在测试的结构（我知道，我不想要空的div ..它有别人建议的解决方案。）

<section id="home" class="group">

<img class="intro" src="img/home.png">

<div id="bg">

<li>
  <img class="bcg" src="img/0.jpg">
  <div class="cambia" style="background: url(img/01.jpg)"></div>
</li>

</ul>
</div>

＆lt; li＆gt; 是主要的容器， .bcg img 是一个透明按钮，我放置悬停，因为我在背景和按钮之间还有一个元素，所以我 3个z-index 级别

.intro{
width: 36%;
border-radius: 99% 78% 34% 17%;
position: absolute;
display: block;
margin: 1% 31%;
z-index: 10;}

#home ul{
width: 110%;
position: relative;
left: -3%;
background: white;
padding-bottom: 36%}


#home li{
float: left;
overflow: hidden;
position: relative;
width: 12%;
padding-bottom: 12%;}

.box{
left: 0px;
top: 0px;
overflow: hidden; 
position: absolute;}

.cambia{
width: 100%;
opacity: .25;
position: absolute;
z-index: 1;
padding-bottom: 100%;
background-size: cover!important;
transition: .4s ease-in-out .09s;}

.bcg{
position: absolute!important;
opacity: .0!important;
background: red;
z-index: 30!important;
width: 100%;}

.bcg:hover ~ .cambia{
opacity: 1!important;}

Answer 1

尝试将backface-visibility添加到li元素。

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;

如何在悬停时避免元素调整大小

1 个答案: