鼠标悬浮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>