Vue 鼠标元素停留动态效果

<template>
  <el-container>
    <div style="width: 70%;height: 100%;margin: 0 auto">
      <el-header>
        <p class="header" style="margin: 0 auto;align-items: center;display: flex;">常用业务</p>
      </el-header>
      <el-main>
        <div class="blog-grid">

          <el-card
              class="blog-detail"
              :class="{ 'is-highlighted': currentHighlight === index }"
              v-for="(blog, index) in blogList"
              :key="blog.id"
              @mouseenter="currentHighlight = index"
          @mouseleave="currentHighlight = null"
          >
          <div class="blog-title">{{ blog.title }}</div>
          <div class="blog-content">{{ blog.content }}</div>
          </el-card>
        </div>
      </el-main>
    </div>
  </el-container>
</template>

<script>
export default {
  name: "test.vue",
  data() {
    return {
      currentHighlight: null, // 用于存储当前高亮的项的索引
      blogList: [
          { title: '博客1', content: '这是博客1的内容。' },
          { title: '博客2', content: '这是博客2的内容。' },
          { title: '博客3', content: '这是博客3的内容。' },
          { title: '博客4', content: '这是博客4的内容。' },
          { title: '博客5', content: '这是博客5的内容。' },
          { title: '博客6', content: '这是博客6的内容。' },
          { title: '博客7', content: '这是博客7的内容。'},
          { title: '博客8', content: '这是博客8的内容。' },
          { title: '博客9', content: '这是博客9的内容。' },
      ]
    }
  },
}
</script>

<style scoped>
.blog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 固定为4列 */
  grid-auto-rows: minmax(100px, auto); /* 根据内容自动调整每行的高度 */
  grid-gap: 20px; /* 网格项之间的间隙 */
  width: 70%; /* 网格容器的宽度 */
  margin: 0 auto; /* 居中显示 */
  cursor: pointer;
}

.blog-detail {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 10px 0 rgba(70, 130, 242, .2);
  cursor: pointer;
  padding: 10px; /* 内边距 */
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.header{
  text-align: center; /* 水平居中文本 */
  width: 100%; /* 使<p>标签宽度占满其父容器 */
  display: flex; /* 使用Flexbox布局 */
  justify-content: center; /* 水平居中Flex子项 */
  align-items: center; /* 垂直居中Flex子项 */
  height: 100%; /* 使Flex容器高度占满其父容器 */
  color: #333;
  font-size: 24px;
  line-height: 30px;
  margin: 48px 0 20px;
  font-weight: 700;
  text-align: center;
}

.blog-detail:hover {
  background-color: #48A6F3; /* 鼠标悬浮时的背景颜色 */
  box-shadow: 0 4px 12px 0 rgba(70, 130, 242, .3); /* 更明显的阴影效果 */
  transform: scale(1.05) translateY(-10px); /* 鼠标悬浮时放大并向上移动 */
  box-shadow: 0 4px 12px 0 rgba(70, 130, 242, .3); /* 更明显的阴影效果 */
}


</style>