vue list hover效果

 <div class="showCol2" v-for="(item,index) in tableData['riskAllName']" :key='index' @mouseover="hoverIndex = index" @mouseout="hoverIndex = -1">
        <span class="riskName">
          <img v-if="tableHead.field === 'riskAllName'" :src="showImg(item)" alt="" class="riskImg">{{item.riskName}}
        </span>
        <a-popover :v-model="index==hoverIndex?true:false" placement="rightBottom">
          <template slot="content">
            <div @click="selectQueryChange(qitem, 'riskAllName',item.riskName)" class="query-item" v-for="(qitem,index) in queryList" :key="index">
              <span style="font-weight: bolder;">{{qitem+' '}}</span>{{item.riskName}}
            </div>
          </template>
          <svg-icon class="iconAdd" :class="{'hoverBg':index==hoverIndex}" icon-class="icon-add" />
        </a-popover>
      </div>




<style  scoped lang="less">
.showCol2 {
  display: flex;

  .riskName {
    margin-right: 10px;
  }
  .iconAdd {
    display: none;
    margin-top: 6px;
    cursor: pointer;
  }
  .hoverBg {
    display: block;
    color: @primary-color;
  }
}
</style>