列表循环，鼠标滑过显示隐藏内容

vue，当在列表里面循环的时候，当鼠标滑过的时候显示隐藏内容，一般是定义一个函数，但是有时方便且判断内容短，可以在标签里面直接判断

这里提出·一个改进，mouseover改为mouseenter，mouseout改为mouseleave，不然当悬浮在按钮上的时候，会出现按钮反复出现不出现的闪烁效果
mouseover和mouseenter的区别
它俩的区别主要在于监听对象的子元素是否触发事件。
mouseover：鼠标移入监听对象中，或者从监听对象的一个子元素移入另一个子元素中时触发该事件。
mouseenter：鼠标移入监听对象时触发，在监听对象内移动不会触发。

<div
        v-for="(obj, index) in commentsList"
        :key="obj.id"
        class="commentItem"
        @mouseenter="showDeleteButton = index"
        @mouseleave="showDeleteButton = -1"
      >
        <el-row>
          <el-col :span="12" style="display: flex">
            <el-text class="perName">{{ obj.userName }}</el-text>
            <el-rate
              v-model="obj.star"
              size="large"
              disabled
              :colors="['#FFA235']"
              disabled-void-color="#ccc"
            />
          </el-col>
          <el-col :span="6" :offset="6" style="display: flex">
            <el-text class="createTime">{{ formatDate(obj.createTime) }}</el-text>
          </el-col>
        </el-row>
        <el-text style="width: 550px; padding-bottom: 30px" tag="div">{{ obj.comment }}</el-text>

        <el-button
          v-if="+obj.creator === userInfo.user.id && index === showDeleteButton"
          @click="delComment(obj.id)"
          class="deleteButton"
          >删除</el-button
        >
      </div>

收藏一个链接css简单实现五角评分、点赞收藏