鼠标悬停在一个ListItem

问题描述：

想知道是否有人知道如何实现鼠标悬停组件的材料UI列表项（http://www.material-ui.com/#/components/list）？由于“SecondaryText”只允许2行，我试图找到一种方法来显示数据（作者，徽章，团队等）的其余部分。鼠标悬停在一个ListItem

这是我的清单：

<List> 
       {trendingPosts.map(trendingPost => 
       <ListItem 
        leftAvatar={<Avatar src={constants.ASSET_URL + "resources/img/user-default.jpg"} />} 
        //rightIconButton={rightIconMenu} 
        primaryText={trendingPost.title} 
        secondaryText={ 
        <p> 
         <span style={{color: darkBlack}}>{trendingPost.content}</span><br /> 
         {trendingPost.author}<span style={trendingBadge}><img width="5" src="https://img.clipartfest.com/8bcfb3290cdd56968f572b08a125a00b_blue-dot-clip-art-dorothy-clipart-transparent-background_300-300.png" /></span> &gt; {trendingPost.team} 
         <br /> 
         {trendingPost.time} 
        </p> 
        } 
        secondaryTextLines={2} 
       /> 

      )} 
       </List>

答

你所要做的是扩大ListItem组件，然后向下传递的数据通过道具。

喜欢的东西说ListItemWithHover其render功能看起来像

render(){ 
    return(
    <div className="list-item-with-hover"> 
     <ListItem/> 
     <div className="list-item-extension"></div> 
    </div> 
    } 
}

那么我想你可以用这种方式

.list-item-with-hover{ 
    position:relative; 
} 

.list-item-with-hover:hover .list-item-extension{ 
    display:block; 
} 

.list-item-extension{ 
    position:absolute; 
    right:-100%; 
    top:0 
    display:none; 
}

的list-item-with-hover指ListItem包装使用CSS和list-item-extension是哪里你会保留你想要显示的其他信息。该list-item-extension与当前值将是正确的，并且默认是隐藏的。在上空盘旋list-item-with-hover它会显示。

当然，您必须将trendingPost对象作为道具传递给新的ListItemWithHover组件，以便您可以在此处使用它。

<List> 
     {trendingPosts.map(trendingPost => <ListItemWithHover trendingPost=trendingPost/>)} 
</List>

鼠标悬停在一个ListItem

相关推荐