CSS过渡在悬停时淡入淡出

Posted 2023-03-06

【中文标题】CSS过渡在悬停时淡入淡出

【英文标题】：CSS transition fade on hover

【发布时间】：2012-10-11 03:02:21

【问题描述】：

我遇到了CSS 转换的问题。我正在为我的作品集设计一个CSS 画廊，我需要我的图像在悬停时淡入。 我已经玩了一个多小时了，我希望有人能指出我正确的方向。

这是JSFiddle的简化版本

【参考方案1】：

这样就可以了

.gallery-item

  opacity:1;


.gallery-item:hover

  opacity:0;
  transition: opacity .2s ease-out;
  -moz-transition: opacity .2s ease-out;
  -webkit-transition: opacity .2s ease-out;
  -o-transition: opacity .2s ease-out;

【讨论】：

您忘记在-moz-transition 上放置秒单位测量值

在非:hover 元素上设置了opacity，这导致了我的问题。

当你释放悬停时，它会以 0.0 的速度快速恢复

【参考方案2】：

我建议您为图片库使用无序列表。

除非您希望图像在悬停后立即获得 50% 的不透明度，否则您应该使用我的代码。您将有一个更顺畅的过渡。

#photos li 
    opacity: .5;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;


#photos li:hover 
    opacity: 1;