CSS VUE UL鼠标移动到多个LI标签上字体高亮

<el-container>
    <el-aside width="180px" >
        <div class="child_button">
            <ul style="cursor:pointer;text-align:left;margin-left: 20px;font-size:18px;"
                :class="colorStyle===index?'colorYellow':'colorWhite'" v-for="(childTab,index) in childTabs" :key="index"
                @click="currentTabs(index)">{{childTab}}</ul>
        </div>
    </el-aside>
    <el-main style="color:black;">
        <component v-bind:is="currentTabComponent"></component>
    </el-main>
</el-container>

data () {
    return {
        childTabs:['两端简支梁理论','模糊综合评价法','Mathew稳定图法'],
        label:['BeamTheory','Fuzzy','Stability'],
        currentTab:'BeamTheory',
        colorStyle:0,
    }
},

 methods: { currentTabs(index){ this.currentTab = this.label[index] this.colorStyle = index } },

.colorYellow {
    color: yellow;
}

.colorWhite {
    color: white;
}