uni-App:做一个类似于百度翻译鼠标移入右侧句子，左侧对应句子自动加上颜色的效果

uni-App:做一个类似于百度翻译鼠标移入右侧句子，左侧对应句子自动加上颜色的效果

我想做的效果类似于这样

代码片段如下：

					<view class="test">
						<text v-for="(item,index) in testArr" :key='index' :class="testIndex==index?'text-yellow':''" @mouseenter='testEnter(index)' @mouseleave='testLeave'>{{item}}。</text>
					</view>
					<view class="test">
						<text v-for="(item,index) in testArr2" :key='index' :class="testIndex==index?'text-yellow':''" @mouseenter='testEnter(index)' @mouseleave='testLeave'>{{item}}。</text>
					</view>

				testStr:'你好。好的',//测试用 正文本和对比文本
				testStr2:'你好a 。好的',//测试用 正文本和对比文本
				testIndex:null,//测试用

computed:{
			testArr(){
				return this.testStr.split('。');
			},
			testArr2(){
				return this.testStr2.split('。');
			}
		},

			testEnter(index){
				
				this.testIndex=index;
			},
			testLeave(){
				this.testIndex=null;
			},

实现效果：