html - 如何在悬停时使宽度过渡平滑？

Question

这可能非常简单，但我完全卡住了，找不到任何有用的东西。抱歉，如果已经有人问过这个问题，如果是的话，请给我链接，很抱歉浪费了您的时间。

所以，我有这段代码:

#nav {
    position: fixed;
    top: 70px;
    left: 70px;
}

.button {
position: relative;
    background: white;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 2px;
    border: 1px solid #eee;
    width: 20px;
    height: 20px;
    line-height: 20px;
}

.button:hover {
    width:auto;
}

.text {
        overflow: hidden;
}

.icon {
        float: left;
        margin-right: 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>

<div id="nav">
    
<div class="button">
<div class="icon"><i class="fa fa-home" aria-hidden="true"></i></div>
<div class="text">home</div>
</div>
    
</div>

我想做的是:

1. 将房子符号放在一个正方形内，使其看起来像一个小按钮。 “家”字样根本不应该显示。
2. 当我将鼠标悬停在房屋“按钮”上以显示文本时，使整个宽度平滑扩展。如果可能的话，我希望扩展的宽度适合我到达那里的文本，因为我会有更多具有不同文本长度的标签。

抱歉，如果这个问题太多了。我真的坚持这一点，正如你所看到的，我已经掌握了一些基础知识，我所需要的只是我上面列出的这两点。非常感谢您的帮助。

Answer 1

您想要的是 CSS 过渡。请注意添加到按钮的初始 css block 的过渡属性。

但是为了正确地实现这一点，您还希望您的 :hover 选择器宽度比变量“自动”值更精确 - 尝试类似“100%”的值。看看这个:

#nav {
    position: fixed;
    top: 70px;
    left: 70px;
}

.button {
position: relative;
    background: white;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 2px;
    border: 1px solid #eee;
    width: 12px;
    height: 20px;
    line-height: 20px;

    -webkit-transition: width 1s;
    transition: width 1s;
}

.button:hover {
    width: 100%;
}

.text {
        overflow: hidden;
}

.icon {
        float: left;
        margin-right: 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>

<div id="nav">
    
<div class="button">
<div class="icon"><i class="fa fa-home" aria-hidden="true"></i></div>
<div class="text">home</div>
</div>
    
</div>

请注意，您将在过渡属性中定义将要更改的其他属性 - 在本例中为宽度 - 以及该更改应发生多长时间 - 例如 1 秒。如果 1 秒太慢，您也可以使用十分之一秒。

“过渡:宽度 .[x]s;”