VUE 鼠标移入/移除，显示/隐藏操作按钮

这里为大家介绍两种方式：

1.给dom绑定鼠标移入/移除事件：@mouseover、@mouseleave

2.使用css:hover修改dom样式

方式1，示例代码：

<template>
    <div class="home-model-content" style="background-color: #A2D1FF" @mouseover="show3 = true" @mouseleave="show3 = false">
        <div class="model-text-content">
            <div class="model-item-title">
                <h2>AI翻译</h2>
            </div>
            <div class="model-item-content">
                不用掌握多门知识，快速翻译多国语言~
            </div>
            <div class="hoverClass">
                <span v-if="show3">立即体验🤏</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref} from "vue";
const show3 = ref(false)
</script>

<style lang="stylus" scoped>
.hoverClass{
  height: 10px;
  margin-top: 16px
}
</style>

方式2，示例代码：

<template>
    <div class="home-model-content" style="background-color: #A2D1FF">
        <div class="model-text-content">
            <div class="model-item-title">
                <h2>AI翻译</h2>
            </div>
            <div class="model-item-content">
                不用掌握多门知识，快速翻译多国语言~
            </div>
            <div class="hoverClass">
                <span class="show4">立即体验🤏</span>
            </div>
        </div>
    </div>
</template>

<script setup>

</script>

<style lang="stylus" scoped>
.hoverClass{
  height: 10px;
  margin-top: 16px
}
.show4 {
  visibility: hidden; /* 默认隐藏按钮 */
  opacity: 0; /* 可选，使按钮在视觉上消失 */
  transition: visibility 0s, opacity 0.5s ease; /* 可选，添加过渡效果 */
}
.content4:hover .show4 {
  visibility: visible; /* 鼠标悬停时显示按钮 */
  opacity: 1; /* 可选，使按钮在视觉上显现 */
  text-decoration: underline;
}
</style>