Question 72548 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to change MUI Card content on hover – Reactjs

I’m looking to change a Card with only an image to a Card with content. Essentially on my portfolio, I’d like to display my project’s logo and then while hovering over it, it should show the title/languages used/description. I currently have my code as:

              <Card sx={{ width: 1, height: 250 }}>
                <CardActionArea>
                  <CardMedia
                    sx={{ 
                      height: 250,
                      ':hover': {
                        // call a function here I believe?
                      },
                     }}
                    image={project.image}
                    title="green iguana"
                  />
                </CardActionArea>
              </Card>
Tags:

2

Answers


  1. 0

    You can only trigger CSS using sx prop of MUI. To trigger functions you can wrap your Card components with a div and use onMouseEnter and onMouseLeave properties.

    Here is a very basic example of it:

      const [myColor, setMyColor] = useState('red');

  <Card sx={{ maxWidth: 345 }}>
     <div onMouseEnter={() => setMyColor('green')} onMouseLeave={() => setMyColor('red')}>
        <CardMedia sx={{ height: 140, border: '2px dashed', borderColor: myColor }}
        />
     </div>
  </Card>

    I hope it helps.

    Login or Signup to reply.
  2. 0

    Simran Singh has the right idea. However the sample code changes CSS properties of the CardMedia component, while the question asks how to change the content of the MUI Card itself. The sample below changes the content of the MUI Card. It can be seen in this live demo. The demo code repository is available. The main code for the component is below.

    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

    Hover effect for multiple Cards

    The needed changes are within the lines of the code shown below.

    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 ? (
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search