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

Question

这可能非常简单，但我完全卡住了，我找不到任何有用的东西。对不起，如果已经提出这个问题，如果是这样，请将我链接到该处，抱歉浪费了您的时间。

所以，我有这段代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我想做的是：

1. 将房子符号放在正方形内，使其看起来像一个小按钮。文字＆＃34; home＆＃34;根本不可见。
2. 当我将鼠标悬停在房子上时，整个事物的宽度会平滑地扩展＆＃34;按钮＆＃34;揭示文字。如果可能的话，我希望扩展的宽度适合我到达那里的文字，因为我会有更多不同文字长度的标签。

很抱歉，如果这个问题太多了。我真的坚持这一点，因为你可以看到我已经掌握了基本功能，我需要的只是上面列出的这两点。非常感谢你的帮助。

Answer 1

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

但是为了正确实现这一点，你还需要你的：悬停选择器宽度比变量'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>

请注意，您将在transition属性中定义OTHER属性将要更改的内容 - 在这种情况下，width - 以及应该发生更改的时间 - 例如1秒。如果1s太慢，你也可以使用十分之一秒。

“过渡：宽度。[x] s;”

Answer 2

您可以将图标置于左边距的中心，并使用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 3

使用transition: all 1s;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

使用过渡和设定宽度。 width：auto withnt wort with transition

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;