当我将目标元素悬停在 Material-UI 中时如何使下拉菜单保持不变

Question

import React from 'react';
import { makeStyles, Typography, Grid } from '@material-ui/core';

const styles = makeStyles((theme) => ({
    root: {},
    textStyle: {
        fontFamily: 'brandon-grotesque-black',
        textTransform: 'uppercase',
        cursor: 'pointer',

        '& + $dropDown': {
            visibility: 'hidden',
            transition: 'all 0s ease 1s',
        },

        '&:hover': {
            '& + $dropDown': {
                transitionDelay: '0s',
                visibility: 'visible',
            },
        },
    },

    dropDown: {
        width: 'max-content',
        position: 'absolute',
        top: '100px',
        pointerEvents: 'none',

        '& ul': {
            listStyleType: 'none',
            padding: '0px 0px',

            '& li': {
                backgroundColor: 'purple !important',
            },
            '&:hover': {},
            // visibility: 'hidden',
        },
    },
}));

const Shop: React.FC = () => {
    const classes = styles();

    const trendingArr = [
        'New Arrivals',
        'Best Sellers',
        'The Summer Edit',
        'FRAME & Mejuri',
        'New Arrivals',
        'Best Sellers',
        'The Summer Edit',
        'FRAME & Mejuri',
    ];

    return (
        <>
            <Typography variant='body1' className={classes.textStyle}>
                Shop
            </Typography>

            <Grid className={classes.dropDown} container direction='row'>
                <ul>
                    <li>
                        <a>
                            <Typography variant='body2'>
                                <b>Trending</b>
                            </Typography>
                        </a>
                    </li>

                    {trendingArr.map((item, i) => (
                        <li>
                            <a>
                                <Typography variant='body2' key={i}>
                                    {item}
                                </Typography>
                            </a>
                        </li>
                    ))}
                </ul>
            </Grid>
        </>
    );
};

export default Shop;

当我将鼠标悬停在 Shop 文本上时，会出现我的下拉菜单，但当我移向下拉菜单时，它会变成 invisible。即使我取消悬停 Shop，我怎样才能使 dropDown 保持不变，以便我可以与下拉元素进行交互。当我将鼠标悬停在 Shop 文本上并移向它（下拉菜单）时，我只想保留下拉菜单。

Answer 1

 import React from 'react';
import { makeStyles, Typography, Grid } from '@material-ui/core';

const styles = makeStyles((theme) => ({
    root: {
        '& $dropDown': {
            visibility: 'hidden',
            transition: 'all 0s ease 0.2s',
            display: 'inline-flex',
        },

        '&:hover $dropDown': {
            transitionDelay: '0s',
            visibility: 'visible',
        },
    },
    textStyle: {
        fontFamily: 'brandon-grotesque-light',
        textTransform: 'uppercase',
        cursor: 'pointer',
        '&:hover': {
            color: theme.palette.primary.light,
        },
    },

    dropDown: {
        top: '80px',
        position: 'absolute',
        width: '100%',
        height: 'auto',
        left: '0',
        backgroundColor: theme.palette.primary.main,
        '& ul': {
            listStyleType: 'none',
            padding: '0px 0px',
            '& li': {
                padding: '5px 0px 5px 30px',
                '& a': {
                    display: 'block',
                },
            },
        },
    },

    rowsStyle: {
        paddingLeft: '80px !important',
        position: 'relative',
    },

    columnStyle: {
        fontFamily: 'brandon-grotesque-black',
    },
    linkStyle: {
        fontFamily: 'brandon-grotesque-light',
        cursor: 'pointer',
        '&:hover': {
            color: theme.palette.primary.light,
        },
    },
}));

const Shop: React.FC = () => {
    const classes = styles();

    const trendingArr = [
        'New Arrivals',
        'Best Sellers',
        'The Summer Edit',
        'FRAME & Mejuri',
        'New Arrivals',
        'Best Sellers',
        'The Summer Edit',
        'FRAME & Mejuri',
    ];

    return (
        <Grid className={classes.root}>
            <Typography variant='body1' className={classes.textStyle}>
                Shop
            </Typography>

            <Grid className={classes.dropDown} container direction='row'>
                <ul>
                    <li>
                        <a>
                            <Typography
                                variant='body2'
                                className={classes.columnStyle}
                            >
                                Trending
                            </Typography>
                        </a>
                    </li>

                    {trendingArr.map((item, i) => (
                        <li>
                            <a>
                                <Typography
                                    className={classes.linkStyle}
                                    variant='body2'
                                    key={i}
                                >
                                    {item}
                                </Typography>
                            </a>
                        </li>
                    ))}
                </ul>
             
            </Grid>
        </Grid>
    );
};

export default Shop;

不是以文本为目标，而是以容器为目标解决了下拉问题。

当我将目标元素悬停在 Material-UI 中时如何使下拉菜单保持不变

How to make the DropDown Menu Stay when I unhover the targeted element in Material-UI

css

styling

hover

material-design

material-ui