【大前端vue：组件】鼠标上移 出现动画

【大前端vue：组件】鼠标上移 出现动画

<template>
  <div class="culture-container">
    <div class="culture-wrapper">
      <h2 class="culture-title">企业文化</h2>
      <div class="culture-content">
        <div
          v-for="(item, index) in cultureList"
          :key="index"
          class="culture-item"
          @mouseenter="handleMouseEnter(index)"
          @mouseleave="handleMouseLeave(index)"
        >
          <!-- 背景图片层 -->
          <div class="item-bg" :style="{ backgroundImage: `url(${item.bgImage})` }">
            <div class="item-number">{{ item.number }}</div>
            <div class="item-name">{{ item.name }}</div>
            <div class="item-icon">
              <img :src="item.icon" :alt="item.name">
            </div>
          </div>

          <!-- 悬浮展示层 -->
          <div class="hover-content" :class="{ active: activeIndex === index }">
            <div class="hover-text">{{ item.description }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CultureIndex',
  data() {
    return {
      activeIndex: null, // 当前激活的索引
      hoverTimer: null, // 用于存储定时器
      cultureList: [
        {
          number: '01',
          name: '标签1',
          icon: '/icons/culture-1.png',
          bgImage: '/images/culture-bg-1.jpg',
          description: '标签描述文字'
        },
        {
          number: '02',
          name: '标签2',
          icon: '/icons/culture-2.png',
          bgImage: '/images/culture-bg-2.jpg',
          description: '标签描述文字'
        },
        {
          number: '03',
          name: '标签3',
          icon: '/icons/culture-3.png',
          bgImage: '/images/culture-bg-3.jpg',
          description: '标签描述文字'
        },
        {
          number: '04',
          name: '标签4',
          icon: '/icons/culture-4.png',
          bgImage: '/images/culture-bg-4.jpg',
          description: '标签4描述文字'
        }
      ]
    }
  },
  methods: {
    handleMouseEnter(index) {
      // 清除之前的定时器
      if (this.hoverTimer) {
        clearTimeout(this.hoverTimer)
      }
      // 设置新的定时器
      this.hoverTimer = setTimeout(() => {
        this.activeIndex = index
      }, 300)
    },
    handleMouseLeave(index) {
      // 清除定时器
      if (this.hoverTimer) {
        clearTimeout(this.hoverTimer)
        this.hoverTimer = null
      }
      // 只有当前激活的项目是当前离开的项目时，才清除激活状态
      if (this.activeIndex === index) {
        this.activeIndex = null
      }
    }
  },
  // 组件销毁时清理定时器
  beforeDestroy() {
    if (this.hoverTimer) {
      clearTimeout(this.hoverTimer)
    }
  }
}
</script>

<style scoped>
.culture-container {
  width: 100%;
  background-color: #f5f9ff;
  padding: 60px 0;
}

.culture-wrapper {
  width: 1200px;
  margin: 0 auto;
}

.culture-title {
  text-align: center;
  font-size: 28px;
  color: #333;
  margin-bottom: 40px;
}

.culture-content {
  display: flex;
  justify-content: space-between;
}

.culture-item {
  position: relative;
  width: 302px;
  height: 500px;
  overflow: hidden;
  cursor: pointer;
}

.item-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 20px;
}

.item-number {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 10px;
}

.item-name {
  font-size: 24px;
  margin: 10px 0;
}

.item-icon {
  margin-top: 20px;
}

.item-icon img {
  width: 40px;
  height: 40px;
}

.hover-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 302px;
  height: 500px;
  background: #1C4DC4;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.1s ease;
  padding: 30px;
  pointer-events: none; /* 防止悬浮层影响鼠标事件 */
}

.hover-content.active {
  opacity: 0.8;
}

.hover-text {
  color: #fff;
  font-size: 16px;
  line-height: 1.8;
  text-align: center;
}

/* 添加渐变遮罩效果 */
.item-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
}

/* 确保内容在遮罩层之上 */
.item-number,
.item-name,
.item-icon {
  position: relative;
  z-index: 1;
}
</style>

原文地址：https://blog.csdn.net/weixin_41497075/article/details/144438140

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！