vue 鼠标悬浮商品图片 图片停留在鼠标箭头上 鼠标移除图片消失

在Vue.js中，要实现鼠标悬浮商品图片时图片停留在鼠标位置的效果，通常可以使用JavaScript的事件监听和CSS的`position`和`transform`属性。以下是一个简单的示例：

1. HTML结构：

<div class="product-image" @mouseover="showImage" @mouseout="hideImage">
  <img :src="productImageSrc" alt="商品图片" :style="{ display: isImageVisible ? 'block' : 'none' }">
</div>

这里创建了一个包含图片的`div`元素，并通过`:mouseover`和`:mouseout`指令绑定了`showImage`和`hideImage`方法。

2. JavaScript (Vue组件内)：

export default {
  data() {
    return {
      productImageSrc: '',
      isImageVisible: false,
    };
  },
  methods: {
    showImage() {
      this.isImageVisible = true;
    },
    hideImage() {
      this.isImageVisible = false;
    },
  },
};

当你鼠标悬停在图片上时，`showImage`方法会被调用，`isImageVisible`变为`true`，显示图片；当鼠标离开时，`hideImage`方法被调用，隐藏图片。

3. CSS:

.product-image {
  position: relative;
}

.product-image img {
  position: absolute;
  transition: opacity 0.3s ease;
  opacity: 0;
}

.product-image:hover img {
  opacity: 1; /* 添加过渡效果使图片平滑显示 */
}

这将使图片在鼠标悬浮时相对定位并逐渐显示出来，在移开时渐隐消失。