在悬停时使浮动图像透明会导致它“跳跃”[重复]

Posted 2023-03-06

【中文标题】在悬停时使浮动图像透明会导致它“跳跃”[重复]

【英文标题】：Making floating image transparent on hover causes it to 'jump' [duplicate]

【发布时间】：2018-04-05 23:03:18

【问题描述】：

我想让一个包含在a 标签中的图像在悬停时变暗。为此，我简单地将包装 a 标签的背景设置为黑色并应用：

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

图片。

这可行，但是当图像元素容器应用了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%);，但遇到了同样的问题。问题似乎是过渡。

【问题讨论】：

您的 jsfiddle 链接不正确。

@fubar 对不起。固定。

@MeltingDog 我检查了你的 jsfiddle，但我没有看到你提到的任何奇怪的“跳跃”问题，在 chrome 和 firefox 和可爱的小狗上进行了测试！

这应该可以解决它 - ***.com/questions/12980153/…

@MeltingDog - 有趣。它在你的小提琴中为我解决了这个问题。 jsfiddle.net/4566a85t/3

【参考方案1】：

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

*
   margin: 0;
   padding: 0;


img
   -webkit-backface-visibility: hidden;

来源：

image moves on hover - chrome opacity issue

示例：

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

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

【参考方案2】：

我的理论是，当它开始动画时，CSS 不知道正确的大小，这就是为什么它就像在第一帧期间进行调整一样。

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

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

干杯！

【讨论】：

是的，你是对的 - 应用固定宽度的作品。事情是我不想要一个固定的宽度。

【参考方案3】：

编辑：以下仅适用于 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/

【讨论】：

你知道这只能在 webkit 浏览器中工作，对吧？

@fubar 你是对的。我再次用您的解决方案重新编写了我的代码，它似乎已经奏效了。谢谢！