the following figure shows that if you want to make a mouse slide over the picture, the mesh box moves along with the mouse. Encountered a very strange problem, figure 1 is normal, but when I move the mouse again, it becomes figure 2. If you move continuously, the mesh box will flash. To put it bluntly, the first second mesh box will follow the mouse, but the next second the mesh box will return to the upper left corner. Figure 3

1

2

divleft3

figure 3

here is the code

template

<div 
    class="goods_description_pic"
    @mouseenter="showcheckeddetailelement=true"
    @mouseleave="showcheckeddetailelement=false"
    @mousemove="checkeddetailproduct($event)">
    <img :src="productinformation.productimg">
    <span
        v-show="showcheckeddetailelement"
        @mouseenter="showcheckeddetailelement=true"
        class="goods_description_detailed_see"
        :style="{ left: followcheckedx+"px", top: followcheckedy+"px"}"></span>
</div>

js

export default{
    data(){
        return {
            followcheckedx: 0,
            followcheckedy: 0
        }
    },
    methods: {
        checkeddetailproduct (e){
            // offsetX
            // e.clientX - e.offsetX 
            this.followcheckedx = e.offsetX - 75;
            this.followcheckedy = e.offsetY - 75;
            if(this.followcheckedx>=150){
                this.followcheckedx=150;
            }
            if(this.followcheckedy>=150){
                this.followcheckedy=150;
            }
            if(this.followcheckedx<0){
                this.followcheckedx=0;
            }
            if(this.followcheckedy<0){
                this.followcheckedy=0;
            }
            console.log("left:" + this.followcheckedx)
            }
    }
}

there must be something negligent. Thank you for taking a look at it for me. Let"s learn and make progress together

the main problem has been found. If you add a mousemove event to the outermost div, it is tantamount to adding a mousemove event to img and span, respectively, and they will relocate their elements according to the mouse, resulting in a situation where the first second is here and the next second is in another place.

the problem has been solved. Thank you for your help. I will try several other methods