Question

我希望在悬停时使a标签中包含的图像变暗。为此，我只是将包裹a标记的背景设置为黑色并应用：

a:hover > img {
  opacity: .8;
  -webkit-transition: opacity .2s ease-out;
  transition: opacity .2s ease-out;
}

到图像。

这有效，但我得到一个奇怪的＆＃39;跳跃＆＃39;图像元素容器应用float: left;或display: inline-block;时出现问题。这仅发生在某些图像上。

当您将鼠标悬停在中间图像上时，可以看到此处：https://jsfiddle.net/4566a85t/

有谁知道我怎么能阻止这个？

我的代码是：

HTML

<div class="wrapper">
    <a href="#">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTojc9ycyhwL6TnP_lEhQrTXy8Cjrs738WeDmnDOmIXGmR20NEJTw">
    </a>
</div>
<div class="wrapper">
    <a href="#">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTojc9ycyhwL6TnP_lEhQrTXy8Cjrs738WeDmnDOmIXGmR20NEJTw">
    </a>
</div>
<div class="wrapper">
    <a href="#">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTojc9ycyhwL6TnP_lEhQrTXy8Cjrs738WeDmnDOmIXGmR20NEJTw">
    </a>
</div>

CSS

.wrapper {
  width: 25%;
  float: left;
}

a {
  background: black;
  display: block;
}

img {
  width: 100%;
  margin: 0;
}

a:hover > img {
  opacity: .8;
   -webkit-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out;
}

编辑：

我尝试使用没有黑色背景的-webkit-filter: brightness(70%);，但遇到了同样的问题。似乎是解决问题的过渡。

Answer 1

我认为您需要先重置浏览器默认css，然后按照评论中的建议将-webkit-backface-visibility: hidden添加到图像

*{
   margin: 0;
   padding: 0;
}

img{
   -webkit-backface-visibility: hidden;
}

<强>来源：

image moves on hover - chrome opacity issue

示例：

＆＃13;
＆＃13;
* { margin: 0; padding: 0; } .wrapper { width: 25%; display: inline-block; } a { background: black; display: block; } img { -webkit-backface-visibility: hidden; width: 100%; margin: 0; } a>img { opacity: 1; } a:hover>img { opacity: .8; -webkit-transition: opacity .2s ease-out; transition: opacity .2s ease-out; }
＆＃13;
<div class="wrapper"> <a href="#"><img src="https://i.pinimg.com/736x/e5/0d/17/e50d177765012ab2e70f8bccb5dc884a--pug-puppies-pug-dogs.jpg"></a> </div> <div class="wrapper"> <a href="#"><img src="https://i.pinimg.com/736x/e5/0d/17/e50d177765012ab2e70f8bccb5dc884a--pug-puppies-pug-dogs.jpg"></a> </div> <div class="wrapper"> <a href="#"><img src="https://i.pinimg.com/736x/e5/0d/17/e50d177765012ab2e70f8bccb5dc884a--pug-puppies-pug-dogs.jpg"></a> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

编辑：下面只适用于Webkit浏览器

好的吧！

我使用-webkit-filter: brightness();并将初始img设置为-webkit-filter: brightness(100%);

我的新代码：

a > img {
  -webkit-filter: brightness(100%);
}

a:hover > img {
   -webkit-filter: brightness(70%);
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   -ms-transition: all 1s ease;
   transition: all 1s ease;
}

更新小提琴：https://jsfiddle.net/4566a85t/2/

Answer 3

我的理论是，当它开始制作动画时，CSS并不知道正确的尺寸，这就是它在第一帧中调整的原因。

但是如果你要设置一个固定宽度的包装器。例如

.wrapper {
  display: inline-block;
  width:100px;
}

干杯！

在悬停时使浮动图像透明使其“跳跃”＃39;

3 个答案: