overflow:hidden 一个 li 中的 span 不起作用

Question

我正在建立一个新网站，我想在鼠标悬停在 li 上时产生一些效果。

如您所见，共有三个li：

           <ul id="list">
               <li>HomePage</li>
               <li>About<span>Me</span></li>
               <li>Contact<span>Form</span></li>
           </ul>

我想从主页隐藏 "Page"，从 AboutMe 隐藏 "Me"，从 ContactForm 隐藏 "form"。我打算用一点 Jquery 来制作它，所以当我悬停 li 时，它会动画显示 li 的宽度，然后显示 spans。

CSS代码是：

#list li{
    font-size:14px;
    color:#3ea9c1;
    overflow:hidden;
    height:60px;
    display:inline;
    width:20px;
    padding:25px;
    transition:1s ease;
}

实际上我不想使用太多 Jquery 因为 css 问题困扰着我。无法找出这里出了什么问题。很乐意提供帮助！谢谢。

Answer 1

你真的不需要Jquery你可以设置 span 的字体大小的动画。

span {
  display: inline-block;
  font-size: 0;
  transition: 1s ease;
}
#list li {
  font-size: 14px;
  color: #3ea9c1;
  height: 60px;
  display: inline;
  width: 20px;
  padding: 25px;
}
#list li:hover span {
  font-size: 1rem;
}

<ul id="list">
  <li>Home <span>Page</span>
  </li>
  <li>About <span>Me</span>
  </li>
  <li>Contact <span>Form</span>
  </li>
</ul>

Answer 2

为什么要使用 jQuery？这就是全部 CSS，应该完全符合您的要求。

#list li{
    font-size:14px;
    color:#3ea9c1;
    overflow:hidden;
    height:60px;
    display:inline;
    width:20px;
    padding:25px;
    transition:1s ease;
}

#list li span {
    max-width: 0;
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    transition: max-width 1s;
}
#list li:hover span {
    max-width: 200px;
}

<ul id="list">
               <li>Home<span>Page</span></li>
               <li>About<span>Me</span></li>
               <li>Contact<span>Form</span></li>
           </ul>

overflow:hidden 一个 li 中的 span 不起作用

overflow:hidden on spans in an li doesn't work

css

overflow

html-lists