如何在悬停父级上触发子悬停样式？

Question

我在reactjs中有一个List。我想在Listitem悬停时只扩大listitem（Avatar和Listitemtext）的内容。这是我的代码......

<List>
		        <ListItem button className={classes.list}>
		          <Avatar className={classes.avatar}>
		          	<i className="fa fa-arrow-circle-right"></i>
		          </Avatar>
		          <ListItemText classes={{subheading:classes.subheading,secondary:classes.secondary}}
		          	 primary="All " secondary="100 People" />
		        </ListItem>
		        <ListItem button>
		          <Avatar className={classes.avatar}>
		            <i className="fa fa-fire" ></i>
		          </Avatar>
		          <ListItemText classes={{subheading:classes.subheading,secondary:classes.secondary}} primary="Trending" secondary="31 Stars" />
		        </ListItem>
		        <li>
		          <Divider inset />
		        </li>
</List>

课程定义

list:{
		'&:hover .inner':{
			transform:'scale(1.2)',
			boxShadow:'2px 2px 4px 2px #9e9e9e',
			
			color:'#e65100',
		},
	},
	avatar:{
		backgroundColor:'#d51e',
		display:'flex',
		'&:hover':{
			transform:'scale(1.2)',
			boxShadow:'2px 2px 4px 2px #9e9e9e',
		},
	},

Answer 1

您可以将CSS :hover选择器应用于要悬停的任何组件。以下是您应该如何定义:hover样式：

const styles = theme => ({
  enlargeOnHover: {
    '&:hover':{
        transform:'scale(1.2)',
        boxShadow:'2px 2px 4px 2px #9e9e9e',
        color:'#e65100',
    },
  },
});

将单个内容片段悬停在ListItem

中

您可以将其应用于ListItem内的多条内容，如下所示：

<ListItem button>
  <Avatar className={classes.enlargeOnHover}>A</Avatar>
  <ListItemText primary="Inbox" className={classes.enlargeOnHover}/>
</ListItem>

请注意，由于ListItem内部有很多填充，因此您需要将内容直接悬停在内容之上（直接在文本或头像上）以查看动作中的样式

将鼠标悬停在整个ListItem

上

您也可以将它应用于整个ListItem，如下所示：

<List>
  <ListItem button className={classes.enlargeOnHover}>
    <Avatar>
      <i className="fa fa-arrow-circle-right"></i>
    </Avatar>
    <ListItemText primary="All" secondary="100 People" />
  </ListItem>
  <ListItem button className={classes.enlargeOnHover}>
    <Avatar>
      <i className="fa fa-fire" ></i>
    </Avatar>
    <ListItemText primary="Trending" secondary="31 Stars" />
  </ListItem>
</List>