如何在材质 ui 卡中悬停时更改文本颜色？我想更改卡片悬停时的文本颜色而不是悬停在文本上？

Question

这里我在卡上应用 css 悬停它的工作，但我也想在悬停时更改文本颜色和卡颜色

   card: {
    maxWidth: 350,
   height: 300,
   '&:hover': {
   backgroundColor: '#373737 !important', 
     },
      
  },

//这是应用上述css的卡片组件

<Card
            className={classes.card}
            style={{
              margin: 'auto',
              backgroundColor: '#F3FEEF',
              borderRadius: '16px',
            }}
          >
            <Box my={2} />
           
            <CardActionArea className={classes.MuiCardActionArea}>
              <CardContent>
                <div className={classes.hovers}>
                  <Typography
                    gutterBottom
                    variant='h5'
                    direction='row'
                    color='textPrimary'
                    align='left'
                    underline='hover'
                  >
                    {aboutTitle}
                  </Typography>

                </div>
              </CardContent>
            </CardActionArea>
          </Card> 

    

Answer 1

我想这就是你想要的。

因此，对于文本，请在卡片类中添加 :hover，然后添加您希望更改的元素，例如 h2。

https://codepen.io/liam88/pen/xxdxOjR

<div class="container">
  <h1>Card colour change on hover</h1>
<div class="row">
  
<div class="card">
  <h2>card title</h2>
  <p>some card text</p>
  <img src="https://source.unsplash.com/WLUHO9A_xik/600x600
">
  <a href="#" class="button"> card link </a>
</div>
</div>
</div>

.container{
  width:900px;
}
.row{
  display:flex;
  flex-direction:row;
}
h1{
  width:100%;
}
.card{
  width:24%;
  background-color:yellow;
  padding:20px;
  display:flex;
  flex-direction:column;
}
.card img{
  width:100%;
}
.button{
  padding:10px;
  link-style:none;
  border:1px solid grey;
  background-color:white;
}
.card:hover{
  background-color:green;
/* general background colour change on the card */
    }
    .card:hover h2{
      color:pink;
/* this is what causes the colour change when you hover on the card */
    }

Answer 2

card: {
   maxWidth: 350,
   height: 300,  
  },
 card:hover h2 {
   color: red;
  }