Question

我需要在

上悬停广告的一部分时展开广告

我希望底部与广告的底部对齐，我还需要在展开时显示不同的文字。

有什么想法吗？

CSS

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

Answer 1

要使这项工作有很多变化。我只是把评论标记放在他们身上。请注意，您的演示中有一些与位置和大小相关的项目。

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; /* */
}

<强> Demo

Answer 2

您需要稍微更改一下代码：

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

Answer 3

您可以在悬停时展开框以动态覆盖宽度并更改文本。请检查 UPDATED JsFiddle Example

body {
    height:250px;
    width:300px;
    border:solid 2px;
}
.parent {
    position:relative;
    float:left;
    width:100%;
    height:100%;
}
.legal {
    background-color:#006fba;
    z-index:110;
    position:absolute;
    bottom:0;
    left:0;
    width: auto;
    transition: all .4s;
}
.legal:hover {
    width:100%;
    /* To make sure the width is aligned with the parent div */
    cursor:default;
    transition: all .4s;
}
.legal-text, .legal span {
    padding:2px 10px;
    font-size:9px;
    color:#FFFFFF;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align:center;
}
.legal span {
    display:none;
    padding:11px 10px;
    /* Expanded text is hidden */
}
.legal:hover p {
    display:none;
    /* the text is hidden */
}
.legal:hover span {
    display:block;
    /* Expanded text is shown */
}

<body>
    <div class="parent">
        <div class="legal">
            <p class="legal-text">Boring Legals here</p> <span>"Here's my expanded text"</span>

        </div>
    </div>
</body>

Answer 4

将position:absolute;与bottom: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;
}

小提琴：https://jsfiddle.net/u7kpc9jL/5/

CSS Hover展开

4 个答案: