Question

我正在建立一个新网站，我希望在将鼠标悬停在li时发挥一些作用。

您可以看到三个li：

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

我想隐藏＆＃34; Page＆＃34;从主页，＆＃34;我＆＃34;来自AboutMe和＆＃34; form＆＃34;来自ContactForm。我将使用一个小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，你可以为跨度的字体大小设置动画。

＆＃13;

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

＆＃13;

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

＆＃13;

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>

溢出：隐藏在李的跨度上不起作用

2 个答案: