制作列表菜单的Hover效果

HTML

<div class="article">
  <h3>目的</h3>
  <p>这是一个简单的列表菜单，当你鼠标移到菜单项时，有一张图片慢慢的从左边向右边移动，并淡淡显示出来，而且此时的菜单项背景色和字体色也同时会改变。下面我们一起来简单的学习这种效果的制作。 </p>
</div>
<ul class="menu">
  <li> <a href="#"> <span>--</span> <span>首页</span> </a> <img src="pp.jpg" alt="image01"/> </li>
  <li> <a href="#"> <span>--</span> <span>照片墙</span> </a> <img src="pp.jpg" alt="image01"/> </li>
  <li> <a href="#"> <span>--</span> <span>语录本</span> </a> <img src="pp.jpg" alt="image01"/> </li>
</ul>