Vue.js如何实现鼠标悬停切换div卡片内容，初始显示图片悬停显示按钮

你可以通过新增状态变量控制图片和按钮的显隐来实现需求，完整修改代码如下：

1. 调整Vue逻辑代码 #

new Vue({
  el: '#mouse',
  data: {
    // 悬停状态标识，默认未悬停
    isHover: false,
    // 替换为你的指定图片实际路径
    coverImg: './your-cover-image.png'
  }, 
  methods: {
    mouseover: function(){
      this.isHover = true
    },    
    mouseleave: function(){
      this.isHover = false
    }
  }
})

2. 修改HTML模板 #

<div id="mouse" @mouseover="mouseover" @mouseleave="mouseleave">
  <!-- 初始状态显示封面图 -->
  <img v-show="!isHover" :src="coverImg" alt="卡片封面" class="cover-img">
  <!-- 悬停时显示操作按钮 -->
  <a v-show="isHover" class="action-btn">
    操作按钮
  </a>
</div>

这里用v-show实现元素显隐，比v-if更适合频繁切换的交互场景，性能表现更好。

3. 适配CSS样式 #

body {
  background: #333;
  
  #mouse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 280px;
    height: 100px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    background: #007db9;
    overflow: hidden;
  }

  .cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
}

如果需要更柔和的切换效果，可以给两个元素套上Vue官方的<transition>组件，自定义淡入淡出等过渡动画。

内容的提问来源于stack exchange，提问作者T dhanunjay