【Vue】鼠标悬停按键效果

效果演示

Template

 定义了一个图片容器 image-content，其中包含了一个 el-image 对象用于显示图片，以及一个具有鼠标悬停效果的 hover-effect 容器。 el-image src 属性绑定了一个变量 image，用于显示图片的路径。

<template>
  <div>
    <div class="image-content">
      
      <el-image :src="image" class="image" fit="scale-down" />

      
      <div class="hover-effect">
        
        <div class="absolute-right-bottom">
          <el-tooltip content="编辑" placement="left-start" effect="light">
            <el-button icon="Edit" @click="handleEdit()" circle>el-button>
          el-tooltip>
        div>
      div>
    div>
  div>
template>

Script

 handleEdit 方法用于处理编辑按钮的点击事件，目前是一个空方法，待实现具体的编辑逻辑。

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    // 图片数据
    const image = ref("/image.png");

    return { image };
  },
  methods: {
    // 编辑按钮点击事件处理
    handleEdit() {
      // TODO: 处理编辑逻辑
    }
  }
});
script>

Style

 在CSS样式中，image-content 定义图片和鼠标悬停时的样式。设置容器的宽度、边框、边框圆角、光标样式，并设置了过渡效果。
 当鼠标悬停在 image-content 上时，容器的边框颜色会变成绿色，悬停时的样式调整通过嵌套的 hover-effect 容器实现。使用绝对定位，覆盖整个图片容器，利用 CSS 过渡效果设置了容器的透明度、背景模糊效果。
 hover-effect 内部包含了一个具有编辑功能的按钮，使用了绝对定位，并通过 transform 属性使按钮位于图片的右下角。

<style>
:root {
  --transition: all 0.3s;
}

.image-content {
  /* 图片容器样式 */
  width: 300px;
  border: 1px dashed #dcdfe6;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--transition);

  .image {
    /* 图片样式 */
    padding: 3px;
    width: 100%;
    height: 180px;
    display: block;
  }

  &:hover {
    /* 鼠标悬停样式 */
    border-color: #17b3a3;

    .hover-effect {
      width: 100%;
      opacity: 1;
    }
  }
}

.hover-effect {
  /* 鼠标悬停效果样式 */
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
  transition: var(--transition);
  backdrop-filter: blur(2px);
}

.absolute-right-bottom {
  /* 编辑按钮位置样式 */
  position: absolute;
  top: 85%;
  left: 90%;
  transform: translate(-50%, -50%);
}
style>