Question

我正在制作一个隐藏按钮信息的菜单。看一下演示代码：

＆＃13;

ul{
  list-style: none;
  width: 300px;
  height: 300px;
  border: 1px solid black;
  padding: 10px;
}
li{
  display: inline-block;
  float: right;
  clear: both;
  border-radius: 20px;
  border: 1px solid black;
  padding: 10px;
  min-width: 0%;
  margin-bottom: 10px;

  transition: all 0.3s ease;
}
li > span{
  color: gray;
  margin-left: 5px;
  opacity: 0;

  transition: opacity 0.3s ease;
}
li:hover{
  min-width: 100%;
}
li:hover > span{
  opacity: 1;
}

*{
  box-sizing: border-box;
}

＆＃13;

<ul>
  <li>FOO<span>BAR</span></li>
  <li>BUTTON<span>More info</span></li>
</ul>

＆＃13;

https://jsfiddle.net/DerekL/g8wn74xe/

li标记应忽略范围中的文本，就好像它们不存在一样（计算宽度时）。是否有可能实现这种效果？

Answer 1

将范围font-size设置为0并在悬停时重新设置

＆＃13;

ul{
    list-style: none;
    width: 300px;
    height: 300px;
    border: 1px solid black;
    padding: 10px;
}
li{
    display: inline-block;
    float: right;
    clear: both;
    border-radius: 20px;
    border: 1px solid black;
    padding: 10px;
    min-width: 0%;
    margin-bottom: 10px;
    
    transition: all 0.3s ease;
}
li > span{
    color: gray;
    margin-left: 5px;
    opacity: 0;
    font-size:0;
    
    transition: all 0.3s ease;
}
li:hover{
    min-width: 100%;
}
li:hover > span{
    opacity: 1;
    font-size:inherit;
}

*{
    box-sizing: border-box;
}

＆＃13;

<ul>
    <li>FOO<span>BAR</span></li>
    <li>BUTTON<span>More info</span></li>
</ul>

＆＃13;

Answer 2

您可以使用position: absolute（和其他一些调整）来阻止<span>影响布局：

＆＃13;

ul{
    list-style: none;
    width: 300px;
    height: 300px;
    border: 1px solid black;
    padding: 10px;
}
li{
    display: inline-block;
    float: right;
    clear: both;
    border-radius: 20px;
    border: 1px solid black;
    padding: 10px;
    min-width: 0%;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
    
    transition: all 0.3s ease;
}
li > span{
    color: gray;
    margin-left: 5px;
    opacity: 0;
    position: absolute;
    white-space: nowrap;
    
    transition: opacity 0.3s ease;
}
li:hover{
    min-width: 100%;
}
li:hover > span{
    opacity: 1;
}

*{
    box-sizing: border-box;
}

＆＃13;

<ul>
    <li>FOO<span>BAR</span></li>
    <li>BUTTON<span>More info</span></li>
</ul>

＆＃13;

Answer 3

您可以将字体从0更改回原始大小。此外，将转换更改为all而不仅仅是不透明度，这样字体大小也会生成动画，并且不会使动画不稳定。

<强> CSS

li > span {
   font-size: 0;                /* <-- Change the font-size to 0 */ 
   transition: all 0.3s ease;   /* <-- Change to 'all' */ 
}

li:hover > span {
  font-size: 16px;              /* <-- Change font-size back */ 
}

ul{
    list-style: none;
    width: 300px;
    height: 300px;
    border: 1px solid black;
    padding: 10px;
}
li{
    display: inline-block;
    float: right;
    clear: both;
    border-radius: 20px;
    border: 1px solid black;
    padding: 10px;
    min-width: 0%;
    margin-bottom: 10px;
    
    transition: all 0.3s ease;
}
li > span{
    color: gray;
    margin-left: 5px;
    opacity: 0;
    font-size: 0;
    transition: all 0.3s ease;
}
li:hover{
    min-width: 100%;
}
li:hover > span{
    opacity: 1;
    font-size: 16px;
}

*{
    box-sizing: border-box;
}

<ul>
    <li>FOO<span>BAR</span></li>
    <li>BUTTON<span>More info</span></li>
</ul>

忽略宽度为

3 个答案: