Html CSS悬停展开

当我的广告悬停在屏幕上时，我需要扩展它的一部分

请看这里：

我想底部对齐的广告底部，我还需要显示不同的文字时展开

有什么想法吗

CSS

---

要使其正常工作，需要进行许多更改。我会把评论标记放在他们旁边。请注意，您的演示中删除了一些与位置和大小相关的项目

body {
    height:250px;
    width:300px;
    border:solid 2px;
    position: relative; /* */
}
.legal {
    height:17px;
    width:85px;
    background-color:#006fba;
    left:0px;
    position: absolute; /* */
    bottom: 0; /* */
    transition: all 0.5s;
}
.legal:hover {
    height: 80px; /* */
    width: 150px; /* */
}
.legal-text, .alternate-text { /* */
    padding-top: 2px;
    font-size: 9px;
    color: #FFFFFF;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
}
.alternate-text {
    display: none; /* */
}
.legal:hover .alternate-text {
    display: block; /* */
}
.legal:hover .legal-text {
    display: none; /* */
}

---

您需要稍微更改代码：

body {
    height:250px;
    width:300px;
    border:solid 2px;
}

.legal:hover {
    height:40px;
    width:250px;
    margin-bottom:20px;
    top:80px;

}

.legal-text {
    padding-top:2px;
    font-size:9px;
    color:#FFFFFF;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align:center;
}

.legal {
    height:17px;
    width:85px;
    background-color:#006fba;
    left:0px;
    top:100px;
    z-index:110;
    margin-top:233px;
}

---

您可以在悬停时展开框以动态覆盖宽度并更改文本。请检查一下电话号码

正文{
高度：250px；
宽度：300px；
边框：实心2px；
}
.家长{
位置：相对位置；
浮动：左；
宽度：100%；
身高：100%；
}
.法律{
背景色：#006fba；
z指数：110；
位置：绝对位置；
底部：0；
左：0；
宽度：自动；
过渡：全部。4s；
}
.法律：悬停{
宽度：100%；
/*确保宽度与父div对齐*/
游标：默认值；
过渡：全部。4s；
}
.法律文本，.法律跨度{
填充：2x10px；
字体大小：9px；
颜色：#FFFFFF；
字体系列：Gotham，“Helvetica Neue”，Helvetica，Arial，无衬线；
文本对齐：居中；
}
.法律跨度{
显示：无；
填充：11px 10px；
/*展开的文本是隐藏的*/
}
.法律：悬停p{
显示：无；
/*文本是隐藏的*/
}
.法定：悬停跨度{
显示：块；
/*显示展开的文本*/
}

这里的无聊法律
“这是我的扩展文本”

使用

位置：绝对与
底部组合：0
将文本粘贴在底部。使用
：after
伪类和
：hover
，您可以通过css更改文本：

body {
    position: relative;
    height:250px;
    width:300px;
    border:solid 2px;
}

.legal:hover {
    height:40px;
    width:250px;    
}

.legal-text {

    padding-top:2px;
    font-size:9px;
    color:#FFFFFF;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align:center;
}

.legal-text:after {
    content: 'Boring Legals here';
}

.legal:hover .legal-text:after {
    content: 'Hover text';
}

.legal {
    position:absolute;
    bottom: 0;
    height:17px;
    width:85px;
    background-color:#006fba;
    left:0px;
    z-index:110;
}

Fiddle:
正如您所知，您的
z-index
属性和
top
/
left
位置属性不会应用，除非您也将非默认的
位置
属性应用于这些选择器（如
位置：相对；
）
body {
    position: relative;
    height:250px;
    width:300px;
    border:solid 2px;
}

.legal:hover {
    height:40px;
    width:250px;    
}

.legal-text {

    padding-top:2px;
    font-size:9px;
    color:#FFFFFF;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align:center;
}

.legal-text:after {
    content: 'Boring Legals here';
}

.legal:hover .legal-text:after {
    content: 'Hover text';
}

.legal {
    position:absolute;
    bottom: 0;
    height:17px;
    width:85px;
    background-color:#006fba;
    left:0px;
    z-index:110;
}