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

Question

这可能非常简单，但我完全被卡住了，找不到任何有用的东西。抱歉，如果有人问过这个问题，请 link 我来回答，很抱歉浪费了你的时间。

所以，我有这个代码：

#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>

我想做的是：

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

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

Answer 1

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

但是为了正确地实现它，您还希望您的 :hover 选择器宽度比变量 'auto' 值更精确 - 尝试类似“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 秒.如果 1s 太慢，您也可以使用十分之一秒。

"transition: width .[x]s;"

Answer 2

使用transition: all 1s;

参考： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

#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: 18px; /*  <-- match this width better */
    height: 18px;
    line-height: 20px;
    transition: all 1s; /*  <-- CSS3 transition */
}

.button:hover {
    width:6em; /*  <-- set a defined width */
}

.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>

Answer 3

您可以将图标居中并留出一定的左边距，并使用 CSS 转换来实现悬停效果（更多示例请参见 w3schools）：

#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;
  -webkit-transition: width 1s;
  transition: width 1s;
}
.button:hover {
  width: 100%;
}
.text {
  overflow: hidden;
}
.icon {
  float: left;
  margin: 0 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>

Answer 4

使用过渡和设置的宽度。 width: auto 不适用于转换。

#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;
    overflow: hidden;
    transition: linear 0.3s;
}

.button:hover {
    width: 100%;
    
}


.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>
<span class="text">home</span>
</div>
    
</div>

Answer 5

如 Paulie_D 所述，无法转换到 width: auto。您可以改为添加 max-width 非悬停状态的预期宽度，并过渡到 max-width 等于或大于您的预期悬停状态宽度。示例如下：

#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: auto;
    min-width: auto;
    max-width: 15px;
    height: 20px;
    line-height: 20px;
    padding-right: 5px;
    transition: max-width 1s;
}

.button:hover {
    max-width: 200px;
}

.text {
    overflow: hidden;
}

.icon {
    width: 20px;
    float: left;
    margin-right: 5px;
    text-align: center;
}

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

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

How can I make the width transition smooth on hover?

html

css

css-transitions

font-awesome