css - 溢出:隐藏在 li 中的跨度上不起作用

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>