Css 将鼠标悬停在动态生成的跨度上，并在Vue中为悬停的图标提供活动类

我想把鼠标悬停在这些音符上，如果我把鼠标悬停在音符2上，那么1，2都应该有活动的类。如果我将鼠标悬停在3上，那么所有3个跨距/图标都应该有活动类

就像我对点击事件所做的那样

那么，如何对悬停进行同样的操作呢

我的代码如下所示：

 <template>
    <div class="track-rating">
       <span :key="note" v-for="note in maxNotes" :class="{ 'active': note <= notes }" @click="rate(note)" class="material-icons mr-1">
        audiotrack
       </span>
    </div>
  </template>
  <script>
    export default {
      name: "Rating",
      props: {
        rating: {
            type: Number,
            required: true
        },
        maxNotes: {
            type: Number,
            default: 3
        },
        hasCounter: {
            type: Boolean,
            default: true
        }
      },
      data() {
        return {
            notes: this.rating
        };
      },
      methods: {
        rate(note) {
            if (typeof note === 'number' && note <= this.maxNotes && note >= 0)
                this.notes = this.notes === note ? note - 1 : note
        }
      }
   };
 </script>

音轨
导出默认值{
名称：“评级”，
道具：{
评级：{
类型：数字，
必填项：true
},
maxNotes：{
类型：数字，
默认值：3
},
hasCounter：{
类型：布尔型，
默认值：true
}
},
数据（）{
返回{
注：本表为评级
};
},
方法：{
费率（注）{
如果（注释类型=='number'&¬e=0）
this.notes=this.notes==注释？注释-1:注释
}
}
};

================

<template>
   <div>
     <Rating :rating="0"/>
   </div>
</template>
<script>
   import Rating from '../Rating';
   export default {
     name: "Test",

     components: {
        Rating
     },
    
   };
 </script>

从“../Rating”导入评级；
导出默认值{
名称：“测试”，
组成部分：{
评级
},
};

尝试此操作，存储当前悬停的便笺，并使用该便笺添加活动类

<template>
    <div class="track-rating">
       <span :key="note" 
              v-for="note in maxNotes" 
             :class="{ 'active': note <= notes || note <= hoveredNote }" 
             @mouseover="hoveredNote = note"  
             @mouseleave="hoveredNote = false" 
             @click="rate(note)" class="material-icons mr-1">
        audiotrack
       </span>
    </div>
  </template>
  <script>
    export default {
      name: "Rating",
      props: {
        rating: {
            type: Number,
            required: true
        },
        maxNotes: {
            type: Number,
            default: 3
        },
        hasCounter: {
            type: Boolean,
            default: true
        }
      },
      data() {
        return {
            notes: this.rating,
            hoveredNote: false,
        };
      },
      methods: {
        rate(note) {
            if (typeof note === 'number' && note <= this.maxNotes && note >= 0)
                this.notes = this.notes === note ? note - 1 : note
        }
      }
   };
 </script>

音轨
导出默认值{
名称：“评级”，
道具：{
评级：{
类型：数字，
必填项：true
},
maxNotes：{
类型：数字，
默认值：3
},
hasCounter：{
类型：布尔型，
默认值：true
}
},
数据（）{
返回{
注：本表为本次评级，
悬停注：错，
};
},
方法：{
费率（注）{
如果（注释类型=='number'&¬e=0）
this.notes=this.notes==注释？注释-1:注释
}
}
};