vue3实现鼠标悬浮div动画效果

需求

鼠标悬浮在div上显示下载按钮和信息，同时保持下面的div位置不变；当鼠标移走的时候就隐藏恢复原样。

效果：

代码

<script setup>
const software = ref([{id: "one",title: "软件",container: [{id: "1231",img: "/src/assets/logo/W.png",name: "win11_21h2_64qweqwrewerewre",mark: "1lzh",download: 10000},{id: "3435",img: "/src/assets/logo/W.png",name: "win11_21h2_64",mark: "1lzh",download: 10},{id: "3454",img: "/src/assets/logo/W.png",name: "win11_21h2_64",mark: "1lzh",download: 10},{id: "w3453",img: "/src/assets/logo/W.png",name: "win11_21h2_64",mark: "1lzh",download: 10},{id: "3454a",img: "/src/assets/logo/W.png",name: "win11_21h2_64",mark: "1lzh",download: 10},{id: "w3453b",img: "/src/assets/logo/W.png",name: "win11_21h2_64",mark: "1lzh",download: 10}]},{id: "two",title: "资源下载",container: [{id: "weret",img: "/src/assets/logo/W.png",name: "win11_21h2_64qweqwrewerewre"},{id: "sdfs",img: "/src/assets/logo/W.png",name: "win11_21h2_64"},{id: "gfh",img: "/src/assets/logo/W.png",name: "win11_21h2_64"},{id: "hrty",img: "/src/assets/logo/W.png",name: "win11_21h2_64"}]}
]);
const cardActiveId = ref(null);const mouseoverFun = (id) => {console.log("id", id);cardActiveId.value = id;
};
const mouseleaveFun = () => {cardActiveId.value = null;
};
</script>

// html<divv-for="(content, index2) in item.container":key="index2"cols="12"sm="2"class="pa-3 ma-2 software-details-col":class="cardActiveId === content.id ? 'active-h ' : 'default-h'"@mouseover="mouseoverFun(content.id)"@mouseleave="mouseleaveFun"><div class="d-flex align-center"><img src="/src/assets/logo/W.png" class="software-details-img" /><div class="software-details-info d-flex flex-column"><span class="name"> {{ content.name }}</span><span v-if="content.mark" class="mark">{{ content.mark }}</span><div v-if="content.download" class="d-flex align-center download"><img src="/src/assets/images/circle-dashed-check.svg" /><span>{{ content.download }}</span></div></div></div><div v-show="cardActiveId === content.id" class="pa-3 ma-2 software-details-download"><v-progress-linear class="m-t-10 m-b-10" :model-value="progressValue" :height="1"></v-progress-linear><span> win11下载-20240802 </span><v-btn class="download-btn d-flex justify-sm-start m-t-10 m-b-10" size="small"><span style="color: rgba(var(--v-theme-primary))">win11_21h2_64</span><template v-slot:append><img src="/src/assets/images/download.svg" /></template></v-btn></div></div>

<style  lang="scss" scoped>.software-details {padding: 0;// 父元素&-col {position: relative;border: 1px solid #7c8fac;cursor: pointer;border-radius: 15px;width: 310px;background-color: rgba(var(--v-theme-containerBg));box-shadow: 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.1));}.default-h {z-index: 10;height: 110px;}.active-h {z-index: 99;transform: scale(1.05, 1.05);transition: transform 0.3s ease; /* 平滑过渡效果 */}&-img {width: 24px;height: 24px;border-radius: 50%;margin-right: 20px;}&-info {.name {color: rgba(var(--v-theme-primary));font-size: 20px;width: 200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.mark {color: rgba(var(--v-theme-grey000));font-size: 18px;}.download {background-color: #fef5e5;padding: 0 5px;width: 45%;border-radius: 10px;img {width: 18px;height: 18px;border-radius: 50%;margin-right: 5px;}span {color: #e9b715;font-size: 18px;}}}// 子元素&-download {position: absolute;width: 100.5%;border-radius: 0 0 15px 15px;background-color: rgba(var(--v-theme-containerBg));border: 1px solid #7c8fac;border-top: transparent;top: 85px;right: -9px;.download-btn {background-color: #e1eef5;width: 100%;box-shadow: none;border: 1px solid rgba(var(--v-theme-grey300));}}}
</style>