在 Vue.js 中创建悬停效果

在 Vue.js 中创建悬停效果可以使用一些内置的指令和事件，也可以使用 CSS 和 JavaScript 来实现。

使用内置指令和事件

Vue.js 提供了 v-on 指令，可以绑定 DOM 元素的事件，如 mouseenter 和 mouseleave。我们可以利用这些事件来创建悬停效果。

<template>
  <div>
    <h1 v-on:mouseenter="hovering = true" v-on:mouseleave="hovering = false">
      Hover me!
    </h1>
    <p v-if="hovering">I'm being hovered.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hovering: false
    }
  }
}
</script>

在上面的代码中，我们使用了 v-on:mouseenter 和 v-on:mouseleave 指令来捕获鼠标进入和退出事件，并将 hovering 数据属性设置为真和假。然后我们使用 v-if 指令来根据 hovering 的值来显示或隐藏其下的 p 元素。

使用 CSS

我们也可以使用纯 CSS 来创建悬停效果。我们可以定义两个类，一个来设置鼠标进入时的效果，另一个来设置鼠标退出时的效果。

<template>
  <div>
    <h1 class="hover-me">
      Hover me!
      <span class="tooltip">I'm being hovered.</span>
    </h1>
  </div>
</template>

<style>
.hover-me {
  position: relative;
}

.hover-me:hover .tooltip {
  opacity: 1;
}

.tooltip {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 0.5rem;
  border-radius: 0.25rem;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
</style>

在上面的代码中，我们使用了 position: relative 来让 h1 元素成为定位上下文，然后使用 :hover 选择器来设置鼠标进入时的样式。我们也定义了一个 tooltip 类，用于显示悬停内容，并使用 display: none 来隐藏它。然后我们使用 opacity 属性来设置透明度，使用 transition 属性来定义平滑过渡效果。

使用 JavaScript

我们也可以使用 JavaScript 来创建悬停效果。我们可以在 mounted 钩子中添加事件监听器来捕获鼠标进入和退出事件，并根据事件来控制显示和隐藏悬停内容。

<template>
  <div>
    <h1 ref="hoverMe">
      Hover me!
      <div ref="tooltip">I'm being hovered.</div>
    </h1>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$refs.hoverMe.addEventListener('mouseenter', () =>
      this.$refs.tooltip.classList.add('visible')
    )
    this.$refs.hoverMe.addEventListener('mouseleave', () =>
      this.$refs.tooltip.classList.remove('visible')
    )
  }
}
</script>

<style>
.visible {
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}
</style>

在上面的代码中，我们在 mounted 钩子中添加了 mouseenter 和 mouseleave 事件监听器来捕获对应的鼠标进入和退出事件，并使用 classList 属性来添加或删除 visible 类来控制显示和隐藏悬停内容。我们也定义了一个 visible 类，并使用 opacity 和 transition 属性来设置显示和隐藏效果。

以上便是使用 Vue.js 创建悬停效果的三种方法，你可以根据实际需求使用适合你的方法。