鼠标移动到对应位置进度条也跟着改变

问题遇到的现象和发生背景

教教我怎么做出鼠标在一个div里从左到右移动对应位置，div里的进度条也跟着向右移动对应长度，像这样的

img

img

用代码块功能插入代码，请勿粘贴截图
<ul class="fresh-video-content" v-show="flag === 4">
            <li class="video-item" v-for="(o,index) in video5" :key="index">
                <div class="mask-img">
                    <img class="video-cover" :src="o.img" alt="">
                    
                    <div class="video-pre-wrap">
                        <img class="video-pre-img" src="" alt="">
                        <span class="video-pre-bg">span>
                        <span class="video-pre-bar">
                            <i>i>
                        span>
                    div>
                    <a class="herf-mask" :href="o.url">a>
                div>
                <a class="video-length">{{o.length}}a>
                <p class="name-video">
                    <a :href="o.url">{{o.name}}a>
                p>
                <a class="play-times">{{o.times}}a>
                <a class="update-time">{{o.update}}a>
            li>
        ul>

关键是操作div的宽度，根据鼠标的移动事件mousemove，获取光标的坐标来实现

 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 浏览器窗口只打开一次 </title>
    <script src="https://code.jquery.com/jquery-1.7.2.js"></script>
</head>
<body>
 
<style type="text/css">
.box{width:100px;height:100px;margin:100px auto;background:#ffff00;margin-left: 100px;z-index: 1}
.box1{position:absolute;width:1300px;height:100px;top:100px;background:transparent;left: 100px;}
</style>
 
<div class="box"></div>
<div class="box1"></div>
 
 
<script>
 var box = document.querySelector('.box');
 var box1 = document.querySelector('.box1');
 box1.addEventListener('mousemove',(e)=>{
     console.log(11,e)
     box.style.width = (e.x -100) + 'px'
 })
</script>  
 
</body>
</html>