Question

我正在制作一个服务器列表网站，对于每个服务器，我想要显示一个图像和一些信息，这些信息将在图片被鼠标“悬停”时显示。

当服务器名称太长时，我希望它滚动显示悬停时的剩余文本，如何在不指定CSS长度的情况下执行此操作？

<div class='server'>
    <div class='server_info'>
        <div align='center' style='margin: 5px; white-space:nowrap; overflow:hidden;'><span class='server_name'>Abc def ghi jkl mno pqr stu vwx yza bcd efg hij klm nop qrs tuv wxy zab cde</span>
        </div>
        <div style='overflow:hidden; padding: 0 5px;'>
            <div style='float:left;'>26 Comments</div>
            <div style='float:right;'>17649 Votes</div>
        </div>
        <div style='overflow:hidden; padding: 0 5px;'>
            <div style='float:left;'>Uptime: 99.7%</div>
            <div style='float:right;'>73/96 Players</div>
        </div>
    </div>
</div>

的CSS：

.server {
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    height: 170px;
    width: 310px;
    border: 1px solid grey;
    position:relative;
    overflow:hidden;
    border-bottom-right-radius:7px;
    border-bottom-left-radius:7px;
    cursor:pointer;
    float:left;
    border-radius: 7px;
}
.server_info {
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 100%;
    bottom: 0;
    border-bottom-right-radius:7px;
    border-bottom-left-radius:7px;
    height: 25px;
    transition: height 0.5s;
    -webkit-transition: height 0.5s;
}
.server_name {
    position: relative;
    left: 0;
    transition: left 1s;
    -webkit-transition: left 1s;
}
.server:hover .server_info {
    height: 60px;
    transition: height 0.5s;
    -webkit-transition: height 0.5s;
}
.server:hover .server_name {
    left: -165px;
    transition: left 3s;
    -webkit-transition: left 3s;
}

Answer 1

您可以指定两个属性：width和left（如果position:absolute）或margin-left（如果position:relative）百分比，例如：{{1 }}

将对象相对于其容器定位？

1 个答案: