Vue.js + Tailwind实现下拉菜单鼠标悬停时保持可见的方法

你的问题根源在于纯CSS hover方案的局限性：下拉菜单是绝对定位，脱离了父<li>的文档流，当鼠标从Genres链接移到下拉菜单时，会先离开父<li>导致hover状态丢失，进而菜单直接消失。改用Vue的鼠标事件控制显示状态可以完美解决这个问题，具体修改如下：

1. 添加状态变量与事件逻辑 #

在<script setup>中定义控制下拉菜单显示的变量：

import { ref } from 'vue'

const { genres } = defineProps(['genres'])
const isDropdownOpen = ref(false)

2. 修改模板结构 #

给包含Genres的<li>添加相对定位、鼠标进入/离开事件，同时给下拉菜单绑定显示状态和自身的鼠标事件：

<template>
    <nav class="navbar">
        <div class="navigation flex justify-between">
            <ul class="flex gap-2.5">
                <li 
                    v-for="item in navLinks" 
                    :key="item.name"
                    :class="{ 'relative': item.name === 'Genres' }"
                    @mouseenter="item.name === 'Genres' && (isDropdownOpen = true)"
                    @mouseleave="item.name === 'Genres' && (isDropdownOpen = false)"
                >
                    <NuxtLink :to="item.link" class="hover:text-blue-500">{{ item.name }}</NuxtLink>
                    <div 
                        v-if="item.name === 'Genres'" 
                        v-show="isDropdownOpen"
                        class="dropdown absolute w-48 bg-white shadow-lg rounded-lg py-2"
                        @mouseenter="isDropdownOpen = true"
                        @mouseleave="isDropdownOpen = false"
                    >
                        <ul>
                            <li v-for="genre in genres" :key="genre._id">
                                <NuxtLink :to="genre.name" class="block px-4 py-2 text-gray-800 hover:bg-blue-500 hover:text-white">{{ genre.name }}</NuxtLink>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
            <div class="auth flex gap-2">
                <NuxtLink to="/auth/register">Register</NuxtLink>
                <NuxtLink to="/auth/login">Login</NuxtLink>
            </div>
        </div>
    </nav>
</template>

3. 清理冗余CSS #

删除原来CSS中控制下拉菜单显示的hover规则，因为现在由Vue的v-show控制显示：

/* 移除以下代码 */
li:hover > .dropdown, .dropdown:hover {
    display: block;
}

核心逻辑说明 #

• 用isDropdownOpen变量统一控制菜单的显示/隐藏状态
• 父<li>和下拉菜单分别监听鼠标事件：
  • 进入<li>或下拉菜单区域时，将状态设为true，保持菜单可见
  • 离开<li>或下拉菜单区域时，将状态设为false，关闭菜单
• 给<li>添加relative类，确保下拉菜单相对于父元素正确定位

内容的提问来源于stack exchange，提问作者Chris Valentine