<div class="about interest"> <h2 class="title2">兴趣爱好</h2> <ul> <li><span class="material-icons" style="vertical-align: -6px;"> piano </span> 钢琴 </li> <li><span class="material-icons" style="vertical-align: -6px;"> code </span> 编程 </li> <li><span class="material-icons" style="vertical-align: -6px;"> nightlife </span> 唱歌 </li> <li><span class="material-icons" style="vertical-align: -6px;"> savings </span> 宠物 </li> </ul> </div>加入鼠标事件

好的，您可以在每个li标签中加入onmouseover和onmouseout属性，来实现鼠标移入移出时的效果。例如：

<div class="about interest">
  <h2 class="title2">兴趣爱好</h2>
  <ul>
    <li onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">
      <span class="material-icons" style="vertical-align: -6px;">piano</span>
      钢琴
    </li>
    <li onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">
      <span class="material-icons" style="vertical-align: -6px;">code</span>
      编程
    </li>
    <li onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">
      <span class="material-icons" style="vertical-align: -6px;">nightlife</span>
      唱歌
    </li>
    <li onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">
      <span class="material-icons" style="vertical-align: -6px;">savings</span>
      宠物
    </li>
  </ul>
</div>

在这个例子中，当鼠标移入li标签时，会将字体颜色改为红色，当鼠标移出时，又将字体颜色改回黑色。您可以根据自己的需求来修改鼠标事件的效果。