jq实现跟随鼠标点击移动的下划线效果

效果如下：

1.html代码：

 <div class="center-left-tap">
    <a href="javascript:void (0)" style="color: #1c1c1c;" class="current" onclick="mt1()">最新</a>
    <a href="javascript:void (0)" class="a-hover" onclick="mt2()">B2C</a>
    <a href="javascript:void (0)" class="a-hover" onclick="mt3()">C2C</a>
    <a href="javascript:void (0)" class="a-hover" onclick="mt4()">传统零售</a>
    <a href="javascript:void (0)" class="a-hover" onclick="mt5()">其他</a>
</div>

 <!--引入下划线图片文件-->
<div class="Tab-img">
  <img src="img-index/new-highline.png" alt="" id="img">
 </div>

2.css代码：

 .center-left-tap{height: 58px;}
 .center-left-tap a{font-size: 16px;color: #999;margin-right: 37px;padding-bottom: 19px;}
 .a-hover:hover{color: #595959;}

 /*下化线*/
 .Tab-img{position: relative}
 #img{position: absolute;top: -20px;left: -7px;width: 9%;transition: all 1s;}

3.js代码：

 <script>
     // 选项卡下划线
     var img = document.getElementById('img');
     function mt1(){
         img.style.left = '-7px';
     }
     function mt2(){
         img.style.left = '50px';
     }
     function mt3(){
         img.style.left = '120px';
     }
     function mt4(){
         img.style.left = '210px';
     }
     function mt5(){
         img.style.left = '300px';
     }
 </script>

应届菜鸟，大神勿喷...