CSS 中的顶部与底部过渡效果不起作用 [英] Transition effects Top vs. Bottom in CSS is not working

问题描述

好吧，这是我在这里的第一个主题，所以就在这里！

我刚刚完成了一个非常简单的 :hover 代码，您可以在其中将鼠标悬停在图像上，并且其下方的标题显示完整.更具体地说，在这段代码中，我有两种类型的标题，一种在图像上方，一种在图像正下方，当您将鼠标悬停在其上方时可以找到.

:hover 效果很好，但是我需要添加一个简单的效果，只是一点点线性过渡.所以我在a"标签中添加了最基本的过渡，但它根本不起作用！我猜代码没有识别 .featured-banner a 类中的 top:0px 和 中的 bottom:0px.featured-banner a:hover.

有没有人有解决办法?感谢你们帮助我！

哦，以防万一，字幕类中的文字是用葡萄牙语写的，但不是很有趣，只是坎昆的广告！=P

这是我正在使用的 HTML:

<a href="#"><div class="caption"><p>Mega Oferta • Cancún • Carnaval 2014</p>
<img src="http://www.advtour.com.br/sample-cancun.jpg"/><div class="under-caption">部分 2.148 美元 Ou entrada + 11x de R$ 358</div></a>

这里是 CSS:

.featured-banner {宽度:930px；高度:350px；背景:#000；字体系列:无衬线；字体大小:23px；边距:14px 0px;溢出:隐藏；位置:相对；}.featured-banner a {文字装饰:无；位置:绝对；顶部:0;-webkit-transition:all 1s 轻松；-moz-transition:all 1s 轻松;-ms-transition:全 1s 缓解；-o-transition:all 1s 轻松;过渡:全1s缓和；}.featured-banner a:hover {顶部:继承；底部:0;}.标题 {宽度:100%；高度:350px；颜色:#FFF；文本转换:大写；位置:绝对；顶部:0px;z-索引:98；}.caption p {宽度:97%；背景:rgba(0,0,0, .4);颜色:#FFF；文本对齐:对齐；文本转换:大写；背景:rgba(0,0,0, .4);填充:11px 14px;位置:绝对；底部:0px;z-索引:98；}.under-caption {宽度:97%；背景:rgba(0,0,0, .4);颜色:#FFF；字体大小:20px；文本对齐:对齐；背景:rgba(0,0,0, .4);填充:11px 14px;z-索引:98；}

这是一个演示

解决方案

如果要过渡效果，则需要过渡相同的样式.从上到下不会导致过渡，因为它正在改变样式.如果你从 top: 0; 到 top: 100%; 然后你会看到一个过渡.

这是我改变的css:

.featured-banner a {文字装饰:无；位置:绝对；顶部:0;-webkit-transition:all 1s 轻松；-moz-transition:all 1s 轻松;-ms-transition:全 1s 缓解；-o-transition:all 1s 轻松;过渡:全1s缓和；}.featured-banner a:hover {顶部:继承；顶部:-55px；}

最后，一个小提琴:演示

Well, this is my first topic here, so here it is!

I've just done a nice-simple :hover code where you can mouse over an image and the captions underneath it appears for complete. More specifically, in this code I have two types of captions, one above the image and one right underneath the image, which can be found when you mouse it over.

The :hover works pretty fine, however I need to add a simple effect, just a little linear transition. So I add the most basic transitions in the "a" tag, but it is not working at all! I guess the code is not recognizing the top:0px in the .featured-banner a class and the bottom:0px in the .featured-banner a:hover.

Does anyone have a solution for it? I appreciate you guys for helping me out!

Oh, just in case, the text inside the captions classes are written in portuguese but not very interesting, just an ad for Cancun! =P

Here is the HTML i'm using:

<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>

And here is the 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;
}

Here is a demo

解决方案

If you are going to transition the effect then you need to transition the same style. Going from top - bottom will cause no transition since it is changing the styles. If you did top: 0; to top: 100%; then you will see a transition.

Here is the css I changed:

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

Finally, a fiddle: Demo

这篇关于CSS 中的顶部与底部过渡效果不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！