怎么让对应的Key的div显示

Question

我想让鼠标经过图片时显示对应的图片底下的三个按钮，但是每次经过所有的按钮都显示了，因为我判断的是当鼠标经过时就显示，那么该怎么改这段代码能让鼠标经过对应的key时，显示对应的div底下的按钮呢？

<ul>
    <li class="course-step-li" v-for="(item,key) in stepList"
        @mouseenter="over = true"
        @mouseleave="over = false"
        @mousedown="stepMousedown(key,'course-step-li')"
        @mouseup="stepMouseup(key,'course-step-li',stepList)"
        :data-id="item.id"
        :data-key="key">
        <div class="li-wrap">
            <div class="step-card-img">
                <img class="step-img" :src="item.thumb_robot ? item.thumb_robot : '../../images/right-icon.jpg'" />
            </div>
            <div v-if="over === true" class="step-card-cont">
                <div class="title">{{ item.title }}</div>
                <el-button type="primary" size="small">编辑</el-button>
                <el-button type="primary" size="small">更换</el-button>
                <el-button type="danger" size="small">删除</el-button>
            </div>
            <div v-else class="step-card-cont">
                <span class="step-name">{{ item.title }}</span>
            </div>
        </div>
    </li>
                    </ul>

Answer 1

把你的mouseover逻辑改一下，不能使统一的over来控制。
设置一个curKey，就是当前激活的那个，mouseover的时候设置一下，出去的时候置空。
v-if显示逻辑也根据curKey是否等于key来判断
@mouseenter="curKey = key"
@mouseleave="curKey = ''"
v-if="curKey === key"

<ul>
    <li class="course-step-li" v-for="(item,key) in stepList"
        @mouseenter="curKey = key"
        @mouseleave="curKey = ''"
        @mousedown="stepMousedown(key,'course-step-li')"
        @mouseup="stepMouseup(key,'course-step-li',stepList)"
        :data-id="item.id"
        :data-key="key">
        <div class="li-wrap">
            <div class="step-card-img">
                <img class="step-img" :src="item.thumb_robot ? item.thumb_robot : '../../images/right-icon.jpg'" />
            </div>
            <div v-if="curKey === key" class="step-card-cont">
                <div class="title">{{ item.title }}</div>
                <el-button type="primary" size="small">编辑</el-button>
                <el-button type="primary" size="small">更换</el-button>
                <el-button type="danger" size="small">删除</el-button>
            </div>
            <div v-else class="step-card-cont">
                <span class="step-name">{{ item.title }}</span>
            </div>
        </div>
    </li>
</ul>

Answer 2

我觉得你可以直接用css hover去做就行了