<分区>
标签 css
<分区>
我有一个关于过渡效果的问题。我创建了这个 fiddle
我想为悬停添加过渡效果。但它不起作用。任何人都可以在这里帮助我吗？
.h_grid_2 .gradient_c_grd_2 {
position:absolute;
width:384px;
height:200px;
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));
-webkit-transition: 1s all;
transition: 1s all;
}
.h_grid_2:hover .gradient_c_grd_2 {
position:absolute;
width:384px;
height:200px;
z-index:1;
background: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255 255, 255, 0.2));
background: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0, 0), rgba(255, 255, 255, 0.2));
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2));
-webkit-transition: 1s all;
transition: 1s all;
}
最佳答案
结账方式:http://jsfiddle.net/gqLgu7jw/1/
想法是添加另一个 div (.gradient_c_grd_3) 并使用如下样式:
.h_grid_2:hover .gradient_c_grd_3{
opacity: 1;
}
.h_grid_2:hover .gradient_c_grd_2 {
opacity: 0;
}
关于Css Transition 悬停渐变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26382022/