鼠标悬浮div或者列表li时，展示出button按钮

<template>
    <div class="item">
        <span>
            <input type="checkbox" :checked="obj.done" @click="handleCheck(obj.id)">
        </span>
        <span>
            {{obj.name}}
        </span>
        <span>
            <button @click="deleteObj(obj.id)" >删除</button>
        </span>
    </div>
</template>

 

<style scoped>
    .item:hover{
        width: 300px;
        background-color: rgb(208, 223, 228);
    }
    div button{
        background-color: pink;
        display: none;
    }

    .item:hover button{
        float: right;
        display: block;
        
    }
    div button:hover{
        cursor: pointer;
    }

</style>