Блог

Главная - Вопросы по программированию - Сделайте так, чтобы div отображался перед другим в пользовательском интерфейсе Material при наведении курсора

Сделайте так, чтобы div отображался перед другим в пользовательском интерфейсе Material при наведении курсора

#css #reactjs #material-ui

Вопрос:

Как сделать так, чтобы черный прозрачный div появлялся перед a <MediaCard/> , когда я наведу на него курсор?

Это то, что я возвращаю, используя пользовательский интерфейс Material:

     <Box>
  <Typography variant='h3'>Home Page</Typography>
  <Typography sx={{ 'margin': '15px 0' }}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </Typography>
  <Container sx={{ marginTop: '100px' }}>
    <Grid container spacing={6}>
      {cards.map(card => {
        return (
          <Grid item>
            <MediaCard {...card} />
          </Grid>
        );
      })}
    </Grid>
  </Container>
</Box >

Ответ №1:

Вы можете использовать CSS brightness -фильтр:

 <CardMedia
  sx={{
    ":hover": {
      filter: "brightness(50%)",
      transition: "all .2s"
    }
  }}

Живая демонстрация

Демо-версия Codesandbox

Рекомендации

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

1. Это сработало, когда я включил его в сетку

2. @prs99 Итак, вы хотите, чтобы эффект применялся ко всей карте? Зачем вам нужно заворачиваться в а Grid ?

Ответ №2:

 <Grid item sx={{ ":hover": { filter: "brightness(50%)" }, 
  transition: "all .2s" }}
>
  <MediaCard {...card} />
</Grid>

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

1. Хотя этот фрагмент кода может быть решением, включая объяснение , действительно помогает улучшить качество вашего поста. Помните, что в будущем вы будете отвечать на этот вопрос для читателей, и эти люди могут не знать причин вашего предложения кода.

Метки: ,