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

Posted 2023-03-28

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

【英文标题】：how to change text color on hover in a matrerial ui card ? i want to change text color on hover of card instead of hover on text?

【发布时间】：2021-09-10 19:15:23

【问题描述】：

这里我在卡上应用 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> 

    

【参考方案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 */
    

【参考方案2】：

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

【讨论】：

悬停在卡片上我想要在悬停时更改卡片内文本颜色的解决方案

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。