javascript - 悬停“右移”菜单

问题描述

我正在尝试实现一个侧菜单，当您将鼠标悬停在其中一个项目上时，该菜单将展开项目“表格”。我正在使用 TailwindCSS 和 React。

我面临的问题是当我将鼠标悬停在按钮上时菜单不会展开。

我已将子菜单设为按钮的子菜单，以便我可以使用组悬停功能，但它不起作用。我已经添加display: ['hover', 'focus']到变体配置中，所以这不是问题。

// SideMenuItem.js

import React from "react";

function SideMenuItem() {
  return (
    <button className="group static m-2 w-16 h-16 bg-red-400"> A
    
      <div className="hidden group-hover:block relative top-0 left-24 w-48 z-10 flex flex-row flex-wrap bg-gray-300">
        <button className="m-2 h-16 w-16 bg-gray-200">Item 1</button>
        <button className="m-2 h-16 w-16 bg-gray-200">Item 2</button>
        <button className="m-2 h-16 w-16 bg-gray-200">Item 3</button>
      </div>
    </button>
  );
}

export default SideMenuItem;

期望的输出：

标签： javascripthtmlcssfrontendtailwind-css

javascript - 悬停“右移”菜单

问题描述

解决方案

推荐阅读