css悬停在转换

我有一个关于我的css悬停效果的问题。css悬停在转换

这是我的DEMO从codepen页面。

问题是悬停在图像上。如果你点击我的演示页面，那么你会发现我的脚本中出现了什么问题。

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

有谁知道解决方案？

这是为图像悬停过渡和渐变颜色我的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)); 

    }

来源

2014-09-26 innovation

只是一个提示：这是没用的定义都在正常和'了'transition'属性：hover'选择......只留下第一个，和从'：hover'移除属性 – LcSalazar 2014-09-26 15:39:26

@LcSalazar谢谢 – innovation 2014-09-26 15:46:14

元件div.gradient_c绝对定位，并且不附着于overflow: hidden;相对定位添加到它的父和增加宽度 - updated demo

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

更新的问题是，你正在调整元素与定位的死者。他们按照增加的宽度出现，好像他们正在移动

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

来源

2014-09-26 15:44:02

最佳解决方案谢谢 – innovation 2014-09-26 15:51:23

非常感谢。我可以问你关于这个问题的另一个问题吗？在这个CSS代码中有这样一行：'.abo_loggo'有一个背景图像，如果你改变它然后添加背景颜色：红色，你看到同样的问题仍然是一个。我能为此做些什么？你可以帮我吗？ – innovation 2014-09-26 15:57:58

更新了我的答案 – 2014-09-26 16:02:16

变化width属性它应该工作

.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)); 
}

来源

2014-09-26 16:02:09

css悬停在转换

回答

相关问题