vue3 鼠标移上去 显示勾选框 选中之后保持高亮

鼠标移上去 显示勾选框 选中之后保持高亮

<template><div class="download-list" v-for="(item, index) in downloadList.top" :key="index"><div class="download-item-content"><!-- 通过checkedItems是否包含当前item.id来控制样式 --><el-checkbox-group v-model="checkedItems" class="ml-4 checkbox-group":class="{ 'visible': checkedItems.includes(item.id) }"><el-checkbox :value="item.id" class="checkbox-item"></el-checkbox></el-checkbox-group></div></div>
</template>

/* 默认隐藏复选框（透明度为0） */
.checkbox-group {opacity: 0;transition: opacity 0.3s ease;
}/* 选中时显示（透明度为1） */
.checkbox-group.visible {opacity: 1;
}/* 可选：添加鼠标悬停效果 */
.download-item-content:hover .checkbox-group {opacity: 1;
}