vue鼠标悬停图片上显示文字

您可以使用Vue的指令`v-on:mouseover`和`v-on:mouseout`来实现鼠标悬停图片上显示文字的效果。具体实现步骤如下：

1. 在需要显示文字的图片上添加一个容器元素，如`<div>`或`<span>`。

2. 在容器元素中添加一个空的`<p>`或`<span>`标签，用于显示文字。

3. 使用`v-on:mouseover`指令监听鼠标悬停事件，将容器元素的`display`属性设置为`block`，显示文字。

4. 使用`v-on:mouseout`指令监听鼠标移开事件，将容器元素的`display`属性设置为`none`，隐藏文字。

示例代码如下：

<template>
  <div>
    <img src="./image.jpg" alt="图片" v-on:mouseover="showText" v-on:mouseout="hideText">
    <div class="text-container" v-show="isShowText">
      <p>这是图片的描述文字</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowText: false
    }
  },
  methods: {
    showText() {
      this.isShowText = true
    },
    hideText() {
      this.isShowText = false
    }
  }
}
</script>

<style>
.text-container {
  position: relative;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: center;
  padding: 20px;
}
.text-container p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}
</style>

在上面的示例中，使用了一个容器元素`<div>`来包裹图片和文字，文字的容器元素使用了`position: relative`，并设置了`display: none`，表示默认不显示。鼠标悬停在图片上时，通过`v-on:mouseover`指令触发`showText`方法，将容器元素的`display`属性设置为`block`，显示文字；鼠标移开时，通过`v-on:mouseout`指令触发`hideText`方法，将容器元素的`display`属性设置为`none`，隐藏文字。文字容器元素的样式可以根据实际需求进行修改。