下拉菜单反应 hover 鼠标

Question

the code react below with the css should generate a dropdown menu with the switch on the menu, but it doesn't work what is this about?下面的代码与 css 反应应该生成一个带有菜单上的开关的下拉菜单，但它不起作用这是什么？ and how can I fix it我该如何解决

Css Style File: Css 样式文件：

/* Dropdown Button */
.dropbtn {
  background-color: #04aa6d;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

TypeScript Code: TypeScript 代码：

import type { NextPage } from "next";
import styles from "../styles/header.module.css";
import Head from "next/head";

export const Header: NextPage = () => {
  return (
    <div>
      <Head>
        <title>Lamboghini</title>
        <meta name="description" content="Lamborghini" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className={styles.dropdown}>
        <button className={styles.dropbtn}>Dropdown</button>
        <div className={styles.dropdown_content}>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </div>
  );
};

Answer 1

Your CSS indicates您的 CSS 表示

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

But your component is using dropdown_content (underscore instead of hyphen)但是您的组件使用的是dropdown_content （下划线而不是连字符）

<div className={styles.dropdown_content}>

下拉菜单反应 hover 鼠标

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-08-22 14:31:11

下拉菜单反应 hover 鼠标

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-08-22 14:31:11

解决方案1
1 已采纳 2022-08-22 14:31:11