JS 动态修改hover的字体颜色

<template>
  <div>
    <div v-for="(item,index) in demo" :key="index">
      <span class="label" :style="changeHover(item.color)">{{item.desc}}</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      demo: [
        {
          desc: '标题一',
          color: '#FFA500',
        },
        {
          desc: '标题二',
          color: '#32CD32',
        }, {
          desc: '标题三',
          color: '#FF0000',
        }
      ]
    };
  },

  methods: {
    //  hover 动态设置
    changeHover(color) {
      return {
        "--color-hover": color
      }
    },
  }
}

</script>
<style lang='less'>
.label:hover {
  color: var(--color-hover);
}
</style>