reactjs 如何在Material UI中将鼠标悬停在卡片上时放大卡片尺寸？

g52tjvyc 于 2023-04-20 发布在 React

关注(0)|答案(3)|浏览(153)

我使用的材料用户界面，并希望放大卡，当你悬停在它完全如图所示here
我该怎么做呢？我用过raised属性，但不是我想要的，我甚至看到有人用zDepth，但也不行。我的文件是这样的：

import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import theme from '../theme';

const useStyles = makeStyles({
  root: {
    maxWidth: 310,
    margin: theme.spacing(5),
  },
});

export default function ImgMediaCard(props) {
  const classes = useStyles();
  const [state, setState] = useState({
    raised:false,
    shadow:1,
  })

  return (
    <Card className={classes.root} 
    onMouseOver={()=>setState({ raised: true, shadow:3})} 
    onMouseOut={()=>setState({ raised:false, shadow:1 })} 
    raised={state.raised} zDepth={state.shadow}>
      <CardActionArea>
        <CardMedia
          component="img"
          alt={props.alt}
          height="140"
          image={props.img}
          title={props.title}
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {props.caption}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            {props.description}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          Share
        </Button>
        <Button size="small" color="primary">
          Learn More
        </Button>
      </CardActions>
    </Card>
  );
}

reactjs

来源：https://stackoverflow.com/questions/64080401/how-to-enlarge-card-size-on-hovering-over-it-in-material-ui

3条答案

按热度按时间

ifsvaxew1#

看起来那个网站上的实现在卡片上使用了transform: scale3d on-hover，所以你可以去做同样的事情，因为你正在复制行为。我利用了你已经拥有的raise状态，而不是伪类:hover。请参阅下面的代码：

const useStyles = makeStyles({
  root: {
    maxWidth: 310,
    transition: "transform 0.15s ease-in-out"
  },
  cardHovered: {
    transform: "scale3d(1.05, 1.05, 1)"
  }
});

function ImgMediaCard(props) {
  const classes = useStyles();
  const [state, setState] = useState({
    raised:false,
    shadow:1,
  })

  return (
    <Card className={classes.root} 
    classes={{root: state.raised ? classes.cardHovered : ""}}
    onMouseOver={()=>setState({ raised: true, shadow:3})} 
    onMouseOut={()=>setState({ raised:false, shadow:1 })} 
    raised={state.raised} zdepth={state.shadow}>
      <CardActionArea>
        <CardMedia
          component="img"
          alt={props.alt}
          height="140"
          image={props.img}
          title={props.title}
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {props.caption}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            {props.description}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          Share
        </Button>
        <Button size="small" color="primary">
          Learn More
        </Button>
      </CardActions>
    </Card>
  );
}

 ReactDOM.render(
  <ImgMediaCard title="title" caption="caption" description="description" img="https://via.placeholder.com/310x140" />,
  document.getElementById("root")
);

<body>
  <div id="root"></div>

  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>

  <script type="text/babel">
  
    const { useState } = React;
  
    const { Card, CardActionArea, CardActions, CardContent, CardMedia, Button, Typography, makeStyles } = MaterialUI;
  </script>
</body>

赞(0）回复(0）举报 2023-04-20

7d7tgy0s2#

这可以很容易地通过使用“&”来定义悬停样式来实现。在Card的根样式中使用"&:hover"。

const useStyles = makeStyles({
  root: {
    maxWidth: 310,
    transition: "transform 0.15s ease-in-out",
    "&:hover": { transform: "scale3d(1.05, 1.05, 1)" },
  },
});

赞(0）回复(0）举报 2023-04-20

iqjalb3h3#

以下是@Saud00的答案，这是MUI v5方法：

const StyledCard = styled(Card)(({ theme }) => ({
  transition: "transform 0.15s ease-in-out",
  "&:hover": { transform: "scale3d(1.02, 1.02, 1)" },
}))

<StyledCard>
{/* Rest of card */}
</StyledCard>

赞(0）回复(0）举报 2023-04-20

我来回答

reactjs 如何在Material UI中将鼠标悬停在卡片上时放大卡片尺寸？

3条答案

相关问题

热门标签

最新问答