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

Question

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

VIT*_*ARI 3 reactjs material-design material-ui

我正在使用 Material UI，并希望当您将鼠标悬停在卡片上时放大卡片，如下所示

我应该如何实现这个目标？我已经使用了筹集的财产，但这不是我想要的。我什至看到有人使用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>
  );
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

95f*_*973 11

看起来该网站上的卡片实现正在使用transform: scale3d悬停功能，因此您可以执行相同的操作，因为您正在复制该行为。我利用了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")
);

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 2

sau*_*d00 8

通过使用“&”定义悬停样式可以轻松实现。"&:hover"在您的 Card 根样式中使用。

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，4 月前
查看次数：	16585 次
最近记录：	2 年，3 月前