Vue3 头像是圆形，hover上去时头像出现黑色半透明样式，且中间显示修改两字的实现

实现效果

原头像

hover效果

实现方式

博主在实际开发过程中使用mouseover和mouseout会出现无法点击或hover频繁闪动的问题，故这里采用的是css中的hover，利用hover也能轻松实现上述效果，且完全不会影响点击事件的使用。

<template>
<div class="img-box">
				<img :src="你的图片地址" class="avatar" />
				<div class="edit-icon-container" @click="toFixImg()">
					<img
						src="修改图标你的地址"
						width="16px"
						height="16px"
						class="edit-img"
					/>
					<span class="edit-text">修改</span>
				</div>
			</div>

</template>
<script setup>
const toFixImg () => {
console.log('你的点击修改头像的逻辑')
</script>

<style lang="scss" scoped>
.img-box {
			position: relative;
			display: inline-block;
			width: 100px; /* 或者你需要的大小 */
			height: 100px; /* 和宽度相同，形成圆形 */
			.avatar {
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: 50%;
				cursor: pointer;
			}
			.icon {
				position: absolute;
				bottom: 0;
				right: 0;
			}
			.edit-icon-container {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: rgba(0, 0, 0, 0.5); /* 初始背景色为完全透明 */
				transition: background-color 0.3s ease; /* 添加过渡效果 */
				border-radius: 50%; /* 与头像保持一致的圆形 */
				color: #fff;
				font-size: 14px;
				opacity: 0;
				cursor: pointer;
				.edit-img {
					margin-right: 6px;
				}
			}
			.avatar:hover + .edit-icon-container,
			.edit-icon-container:hover {
				opacity: 1; /* 鼠标悬浮时显示文本 */
			}
		}
</style>