jquery实现鼠标hover锚点定位

一、html结构

<div style="display: flex;height: 800px;border: 1px solid red;">
                <div style="width: 70%;height: 800px;border: 1px solid salmon;overflow: auto;">
                    <div :id="item.id" v-for="(item,index) in idlist" style="width: 100%;border: 1px solid navajowhite;height: 150px;" class="itemid">{{item.id}}</div>
                </div>
                <div style="width: 30%;height: 800px;border: 1px solid hotpink;overflow: auto">
                    <div v-for="(item,index) in lists" class="aul">
                        <a @click.stop="clia(item)" class="hoveraa" :href="item.src" style="width: 100%;height: 200px;border: 1px solid yellow;line-height: 200px;text-align: center;font-size: 16px;color: #18b566;cursor: pointer;display: inline-block">{{item.label}}</a>
                    </div>
                </div>
            </div>

二、js逻辑代码

<script>
    new Vue({
        el: '#app',
        data: function() {
            var _this = this;
            return{
                idlist:[
                    {
                        id:'item1'
                    },
                    {
                        id:'item2'
                    },
                    {
                        id:'item3'
                    },
                    {
                        id:'item4'
                    },
                    {
                        id:'item5'
                    },
                    {
                        id:'item6'
                    },
                    {
                        id:'item7'
                    },
                    {
                        id:'item8'
                    },
                    {
                        id:'item9'
                    },
                    {
                        id:'item10'
                    },
                    {
                        id:'item11'
                    },
                    {
                        id:'item12'
                    }
                ],
                lists:[
                    {
                        value:'1',
                        label:'1日',
                        src:'#item1'
                    },
                    {
                        value:'2',
                        label:'2日',
                        src:'#item3'
                    },
                    {
                        value:'3',
                        label:'3日',
                        src:'#item5'
                    },
                    {
                        value:'4',
                        label:'4日',
                        src:'#item7'
                    },
                    {
                        value:'5',
                        label:'5日',
                        src:'#item9'
                    },
                    {
                        value:'6',
                        label:'6日',
                        src:'#item2'
                    },
                    {
                        value:'7',
                        label:'7日',
                        src:'#item4'
                    },
                    {
                        value:'8',
                        label:'8日',
                        src:'#item6'
                    },
                    {
                        value:'9',
                        label:'9日',
                        src:'#item8'
                    },
                    {
                        value:'10',
                        label:'10日',
                        src:'#item10'
                    },
                    {
                        value:'11',
                        label:'11日',
                        src:'#item12'
                    },
                    {
                        value:'12',
                        label:'12日',
                        src:'#item11'
                    },
                ]

            }
        },
        mounted:function(){
            var oldColor = "";
            var itemdstyl = '1px solid navajowhite'
            var _this = this
            $('.aul').on('mouseenter', 'a', function() {//绑定鼠标进入事件
                oldColor = $(this).css("background-color");
                var itemd = $(this).context.hash
                $(this)[0].click();
                $(itemd).css({"border":"3px dashed red"});
                $(this).css("background-color","yellow");
            });
            $('.aul').on('mouseleave', 'a', function() {//绑定鼠标划出事件
                $(this).css("background-color",oldColor);
                var itemd = $(this).context.hash
                $('.itemid').css("background-color",oldColor);
                $(itemd).css("border",itemdstyl);
            });
        },
        methods: {
            clia:function(item){
                console.log('556',item)
            }
        }
    })
</script>

三、效果图示例，鼠标悬浮在5日上，左边item9列外框添加样式标红，