嗯,这是我的第一个话题,所以这里就是!
我刚刚做了一个非常简单的:悬停代码,您可以将鼠标悬停在图像上,并且其下方的标题显示为完整。更具体地说,在这段代码中我有两种类型的标题,一种在图像上方,另一种在图像下方,当你将它鼠标悬停时可以找到它。
:hover工作得非常好,但是我需要添加一个简单的效果,只需要一点线性过渡。所以我在“a”标签中添加了最基本的过渡,但它根本不起作用!我猜代码无法识别 .featured-banner a 类中的 top:0px 和中的 bottom:0px .featured-banner a:悬停。
有没有人有解决方案?我感谢你们帮助我!
哦,为了以防万一,字幕类中的文字是用葡萄牙语写的,但不是很有趣,只是坎昆的广告! = P
以下是我正在使用的HTML:
<div class="featured-banner">
<a href="#">
<div class="caption">
<p>Mega Oferta • Cancún • Carnaval 2014</p>
</div>
<img src="http://www.advtour.com.br/sample-cancun.jpg" />
<div class="under-caption">A partir de US$ 2.148 Ou entrada + 11x de R$ 358</div>
</a>
这是CSS:
.featured-banner {
width:930px;
height:350px;
background:#000;
font-family:sans-serif;
font-size:23px;
margin:14px 0px;
overflow:hidden;
position:relative;
}
.featured-banner a {
text-decoration:none;
position:absolute;
top:0;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
.featured-banner a:hover {
top:inherit;
bottom:0;
}
.caption {
width:100%;
height:350px;
color:#FFF;
text-transform:uppercase;
position:absolute;
top:0px;
z-index:98;
}
.caption p {
width:97%;
background:rgba(0,0,0, .4);
color:#FFF;
text-align:justify;
text-transform:uppercase;
background:rgba(0,0,0, .4);
padding:11px 14px;
position:absolute;
bottom:0px;
z-index:98;
}
.under-caption {
width:97%;
background:rgba(0,0,0, .4);
color:#FFF;
font-size:20px;
text-align:justify;
background:rgba(0,0,0, .4);
padding:11px 14px;
z-index:98;
}
答案 0 :(得分:4)
如果要转换效果,则需要转换相同的样式。从顶部到底部将不会导致转换,因为它正在改变样式。如果您top: 0;
到top: 100%;
,那么您会看到过渡。
这是我改变的CSS:
.featured-banner a {
text-decoration:none;
position:absolute;
top:0;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
.featured-banner a:hover {
top:inherit;
top: -55px;
}
最后,小提琴:Demo
答案 1 :(得分:1)
您只能转换相同的属性。顶部和底部不一样。 我找到了一个小提琴,展示了它是如何工作的。
.under-caption {
position: absolute;
width:97%;
background:rgba(0,0,0, .4);
color:#FFF;
font-size:20px;
text-align:justify;
background:rgba(0,0,0, .4);
padding:11px 14px;
z-index:98;
bottom: -3em;
-webkit-transition:bottom 1s ease;
-moz-transition:bottom 1s ease;
-ms-transition:bottom 1s ease;
-o-transition:bottom 1s ease;
transition:bottom 1s ease;
}
.featured-banner:hover .under-caption{
bottom: 1em;
}