辛格的 idea 是正确的.但是，示例代码更改了CardMedia组件的CSS属性，而问题询问如何更改MUI卡本身的内容.下面的示例更改了MUI卡的内容.它可以在这live demo中看到.演示code repository现已推出.该组件的主要代码如下所示.

App.jsx

...

import img from './../assets/images/purple.jpg';

const App = () => {

    const [ isHovered, setIsHovered ] = useState( false );
    const project = {
        image: img
    };

    function handleMouseOver() {
        setIsHovered( true );
    }

    function handleMouseOut() {
        setIsHovered( false );
    }

    return (
        <Card sx={{ width: '360px', height: '250px' }}>
            <CardActionArea
                onMouseOver={ handleMouseOver }
                onMouseOut={ handleMouseOut }
            >
                { isHovered
                    ?     <CardContent sx={ { minHeight: '220px' } } >
                            <CardHeader
                                action={
                                    <IconButton aria-label="settings">
                                    <MoreVertIcon />
                                    </IconButton>
                                }
                                title="My Title"
                                subheader="All the cool languages"
                            />
                            <Box ml={ 2 }>
                                <Typography variant="body1" color="text.primary">
                                    More information...
                                </Typography>
                                <Typography variant="body1" color="text.primary">
                                    Description of my cool projects!
                                </Typography>
                            </Box>
                            <CardActions>
                                <IconButton>
                                    { 'Click Me to Learn More!' }
                                    <TouchAppIcon size={ 'large' } />
                                </IconButton>
                            </CardActions>
                        </CardContent>
                    :   <CardMedia
                            sx={{
                                height: 250,
                                '&:hover': {
                                    '*': 'inherit' // Nope. Code does not go here.
                                },
                             }}
                            image={ project.image }
                            title="green iguana"
                        />
                }
            </CardActionArea>
        </Card>
    );
};

export default App;

Update

多张卡片的悬停效果

所需的更改位于如下所示的代码行中.

export default function Projects() {
    const [isHoveredId, setIsHoveredId] = useState( '' );
    let projectList;

    function handleMouseOver( ID ) {
        return () => {
            setIsHoveredId( ID );
        }
    }

    function handleMouseOut() {
         setIsHoveredId( '' );
    }

    if (ScreenDetection() === false) {
        projectList = (
            <div className="grid grid-cols-2 gap-6 pt-10">
                {projects.map((project) => (
                    <Card sx={{ width: 1, height: 250 }}>
                        <CardActionArea
                            onMouseOver={handleMouseOver( project.title )}
                            onMouseOut={handleMouseOut}
                            href={project.link}
                            rel="noopener noreferrer"
                            target="_blank"
                        >
                            {isHoveredId == project.title ? (