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

*neverGiveUp*

已于 2025-05-30 16:11:02 修改

阅读量384

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Demo 文章标签：前端开发语言 vue.js

于 2025-05-30 16:10:31 首次发布

本文链接：https://blog.csdn.net/qq_48701993/article/details/148339694

Demo 专栏收录该内容

21 篇文章

订阅专栏

需求

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