鼠标进入和离开时

Question

我一直在寻找解决我问题的方法。我知道必须用javascript完成，但我不习惯。希望将li项目的背景颜色从灰色平滑地更改为橙色，同时单击并悬停每个项目时，将字体大小稍微增加一点。当鼠标离开时，该项目希望所有内容以原始的灰色和原始的大小平滑地返回。非常感谢  这是代码：

#top_navigation ul{
width:95%;
list-style: none;
margin-left:auto;
margin-right:auto;
text-align:center;}

#top_navigation li{
white-space: nowrap;
float: left;
font-size:1vw;
padding:0;
margin-right:1px;
display:inline;
}

#top_navigation li a{
background-color:grey;
white-space: nowrap;
color:#fff;
text-align: center;
text-decoration: none;
letter-spacing:0.125em;
}


#top_navigation a{padding: 1em 2.5em;
display:block}

<nav id="top_navigation">
<ul>
								
	<li><a href="">Welcome</a></li>
	<li><a href="">Instruments</a></li>
	<li><a href="">Photogallery</a></li>
	<li><a href="">Contact</a></li>
</ul>
</nav>