CSS 悬停展开答案

【问题标题】：CSS Hover ExpandCSS 悬停展开
【发布时间】：2015-03-09 19:04:07
【问题描述】：

当我的广告悬停在上面时，我需要展开它的一部分

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

有什么想法吗？

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

【问题讨论】：

请注意，您的 z-index 属性和您的 top/left 位置属性不会应用，除非您还对这些选择器应用非默认的 position 属性（如position: relative;）

标签： html css text hover

【解决方案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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

您可以在悬停时展开框以动态覆盖宽度并更改文本。请检查 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>

【讨论】：