【前端样式】头像，鼠标悬浮变成黑色透明+提示字

最新推荐文章于 2024-09-11 09:32:29 发布

STZ程序猿

最新推荐文章于 2024-09-11 09:32:29 发布

阅读量301

点赞数 3

分类专栏：前端样式文章标签：前端 javascript css

本文链接：https://blog.csdn.net/weixin_43243652/article/details/140750422

版权

前端样式专栏收录该内容

4 篇文章 0 订阅

订阅专栏

		  <!-- 用户头像 -->
          <div style="display: flex; justify-content: center; align-items: center;width: 80px; height: 80px; position: relative;" @mouseover="showReplace = true" @mouseleave="showReplace = false">
            <div style="display: flex; justify-content: center; align-items: center;">
              <el-avatar style="width: 80px; height: 80px;" :src="头像的链接" fit="fill"></el-avatar>
            </div>
            <el-button v-show="showReplace" circle type="text"
                 style="position: absolute;width: 80px;height: 80px;display: flex;justify-content: center; align-items: center;
                 color: white;
                 background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
                 pointer-events: auto; /* 确保可以触发点击事件 */"
                 @click="showUploadDialog = true">
              更换头像
            </el-button>
          </div>

showUploadDialog 在数据区定义，是上传头像的对话框。