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

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',
    },
  },
});

Hover individual pieces of content inside the ListItem

您可以将它应用于ListItem内部的内容，如下所示：

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

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

Hover the whole 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>