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

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. 把房子的标志放在一个正方形里，这样它看起来就像一个小按钮。文本"home"根本不应该是可见的。
2. 当我将鼠标悬停在房屋"按钮"上以显示文本时，使整个事物的宽度平滑扩展。如果可能的话，我想扩大宽度，以适应我得到的文本，因为我将有更多的标签与不同的文本长度。

对不起，如果这是一个过分的要求。我真的被困住了，正如你所看到的，我已经有了基本的工作，我所需要的就是我上面列出的这两点。非常感谢您的帮助。

Answer 1

你可以在图标中间设置一些左距，并使用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 2

你想要的是一个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秒。如果15秒太慢，你也可以使用十分之一秒。

" font - family:宋体;"

Answer 3

使用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 4

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

Answer 5

使用过渡和设置宽度。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>