Блог

Главная - Вопросы по программированию - как отключить эффекты наведения курсора мыши и щелчка материала по умолчанию-ui cardActionArea

как отключить эффекты наведения курсора мыши и щелчка материала по умолчанию-ui cardActionArea

#javascript #css #reactjs #material-ui

#javascript #css #reactjs #материал-пользовательский интерфейс

Вопрос:

как вы можете видеть здесь https://material-ui.com/components/cards образец карточки с фотографией ящерицы. при наведении курсора мыши на cardActionArea она становится темнее (светлее) в зависимости от темы, а при нажатии на карточку изображение становится светлее (темнее), начиная с указателя мыши. теперь у меня есть два вопроса: 1- как я могу изменить цвет эффекта щелчка? например, я хочу, чтобы фотография становилась красной (меняла оттенок), когда пользователь нажимает на нее 2- Я реализовал свой собственный эффект наведения, при котором при наведении курсора карта немного поднимается (коды ниже). как я могу отключить эффект наведения по умолчанию, который изменяет цвет изображения?

 const useStyles = makeStyles({
    root: {
        width: 345,
        margin: 5,
        'amp;:hover': {
            transform: 'translateY(-5px) !important'
        },
    },
    media: {
        maxHeight: 350,
        marginBottom:-3
    },
});

Ответ №1:

Вы должны иметь возможность отключить события указателя, которые остановят эффекты наведения по умолчанию (обратите внимание, что это также остановит события onClick, поскольку отключит все события мыши):

 const useStyles = makeStyles({
    root: {
        width: 345,
        margin: 5,
        'amp;:hover': {
            pointerEvents: 'none',
            transform: 'translateY(-5px) !important'
        },
    },
    media: {
        maxHeight: 350,
        marginBottom:-3
    },
});

Комментарии:

1. спасибо за ваш ответ. как вы сказали, это остановит события onClick, и мне это нужно. Мне нужно знать, какое свойство css будет изменяться по умолчанию при наведении mui, чтобы я мог сам изменить его значение и перезаписать его

2. Я не уверен, что понял ваш вопрос. Вы спрашиваете, какие свойства css изменяются по умолчанию при наведении курсора мыши на определенный компонент Material-UI? Для этого вам нужно будет использовать инструменты консоли и отладчика браузера, чтобы увидеть css, сгенерированный классами Material-UI.

3. наведение — это событие, которое вы хотите предотвратить, поэтому его нужно будет перенести непосредственно в root псевдокласс, а не в псевдокласс.

Ответ №2:

 const {
  Card,
  CardActionArea,
  CardActions,
  CardContent,
  CardMedia,
  Button,
  Typography,
  makeStyles
} = MaterialUI;

const useStyles = makeStyles((theme) => ({
  root: {
    maxWidth: 345,
    transition: theme.transitions.create("transform", {
      easing: theme.transitions.easing.easeInOut,
      duration: theme.transitions.duration.standard
    }),
    "amp;:hover": {
      transform: "translateY(-5px)"
    }
  },
  focus: {
    "amp;amp;amp;": {
      opacity: 0
    }
  },
  ripple: {
    color: "red"
  }
}));

function ImgMediaCard() {
  const classes = useStyles();

  return (
    <Card className={classes.root}>
      <CardActionArea
        classes={{ focusHighlight: classes.focus }}
        TouchRippleProps={{ className: classes.ripple }}
      >
        <CardMedia
          component="img"
          alt="Contemplative Reptile"
          height="140"
          image="https://material-ui.com/static/images/cards/contemplative-reptile.jpg"
          title="Contemplative Reptile"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            Lizard
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            Lizards are a widespread group of squamate reptiles, with over 6,000
            species, ranging across all continents except Antarctica
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          Share
        </Button>
        <Button size="small" color="primary">
          Learn More
        </Button>
      </CardActions>
    </Card>
  );
}

ReactDOM.render(<ImgMediaCard />, document.getElementById('root')) 
 <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700amp;display=swap" />
<div id="root"></div>

Метки: