我一直在网站上工作,但我遇到了转换问题,这种情况只发生在Chrome中。不知何故Chrome不想进行我使用的其他浏览器(Safari,Firefox)所做的转换。
这是HTML:
<div class="kategoria_box">
<div class="kategoria_box_header">
<h4>Fürdő</h4>
</div>
<div class="kategoria_box_image">
<a href="termekek/kategoriak/furdo/">
<img src="http://mondano.hu/img/furdo.jpg">
<span class="caption">
<p>Fürdőszoba</p>
</span>
</a>
</div>
</div>
这是CSS:
div.kategoria_box_image {
font-size: 1.5em;
font-weight: 200;
cursor: pointer;
float: left;
position: relative;
overflow: hidden;
}
div.kategoria_box_image img {
left: 0;
max-width: 460px;
-webkit-transition: all 600ms ease-out;
-moz-transition: all 600ms ease-out;
-o-transition: all 600ms ease-out;
-ms-transition: all 600ms ease-out;
transition: all 600ms ease-out;
}
div.kategoria_box_image .caption {
opacity: 0;
height: 100%;
text-align: left;
padding: 60px 0 0px 0px;
background-color: #fff;
position: absolute;
color: #5d5d5d;
z-index: 100;
-webkit-transition: all 600ms ease-out;
-moz-transition: all 600ms ease-out;
-o-transition: all 600ms ease-out;
-ms-transition: all 600ms ease-out;
transition: all 600ms ease-out;
left: 0;
}
div.kategoria_box_image:hover .caption {
opacity: 0.82;
}
除了以我自己独特的风格编码之外,我的代码有问题吗?
答案 0 :(得分:2)
您不再需要webkit-前缀。你忘了设置top:0表示span.caption
http://caniuse.com/#feat=css-transitions
这是我的codepen: http://codepen.io/dschu/pen/XbwYom
div.kategoria_box_image {
font-size: 1.5em;
font-weight: 200;
cursor: pointer;
float: left;
position: relative;
overflow: hidden;
}
div.kategoria_box_image img {
left: 0;
max-width: 460px;
transition: all 600ms ease-out;
}
div.kategoria_box_image .caption {
opacity: 0;
height: 100%;
text-align: left;
padding: 60px 0 0px 0px;
background-color: #fff;
position: absolute;
color: #5d5d5d;
z-index: 100;
transition: all 600ms ease-out;
top: 0;
left: 0;
}
div.kategoria_box_image:hover .caption {
opacity: 0.82;
}