CSS悬停在过渡上答案

【问题标题】：css hover over transitionCSS悬停在过渡上
【发布时间】：2014-09-27 00:04:06
【问题描述】：

我对我的 CSS 悬停效果有一个疑问。

这是我来自codepen的DEMO页面。

问题是悬停在图像上。如果您单击我的演示页面，那么您会看到我的脚本中有什么问题。

当您将鼠标悬停在图像上时，第一个图像是可以的，但是当您将鼠标移动到另一个图像时，我的渐变颜色会向左移动。

有人知道解决办法吗？

这是我的图像悬停过渡和渐变颜色的 CSS 代码：

.abo_im {
  float:left;
  width:170px;
  height:150px;
overflow:hidden;
  -webkit-transition: all .3s ;
        -moz-transition: all .3s ;
        -ms-transition: all .3s ;
        -o-transition: all .3s ;
        transition: all .3s ;


}
.abo_im  img.height {
   width: 100%;
   height:auto;

}
.abo_im img {
  width:100%; 

}
.abo_im:hover {
  width:120%; 
  margin: 0 0 0 -10%; 
        -moz-transition: all .3s ;
        -ms-transition: all .3s ;
        -o-transition: all .3s ;
        transition: all .3s ;   
}
.gradient_c {
  position:absolute;
  width:170px;
  height:150px;
   z-index:1;
  background: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));

    }

【问题讨论】：

提示：在普通和:hover 选择器上定义transition 属性是没有用的...只保留第一个，并从:hover 中删除属性

标签： html css

【解决方案1】：

元素div.gradient_c 是绝对定位的，不遵守overflow: hidden; 向其父元素添加相对定位并增加宽度 - updated demo

.abo_im {
    position: relative;
}
.gradient_c {
    width: 186px;
}

更新问题是您正在调整具有已定位死者的元素。他们跟随增加的宽度看起来好像他们在移动

将.abo_im:hover 更改为.abo_im:hover img 只会影响图像的宽度。 Demo

【讨论】：

非常感谢。关于这个问题我可以再问你一个问题吗？在这个css代码中有这一行：.abo_loggo有一个背景图像，如果你改变它然后添加背景颜色：红色，你会看到同样的问题仍然存在。我能为此做些什么？你能帮帮我吗？

【解决方案2】：

改变它应该工作的宽度属性

.gradient_c {
  position:absolute;
  width:auto;//change this
  height:150px;
   z-index:1;
  background: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}

【讨论】：