Question

想知道是否有人知道如何为Material UI ListItem（http://www.material-ui.com/#/components/list）实现Mouseover组件？从＆＃34; SecondaryText＆＃34;只允许2行，我试图找到一种方法来显示其余的数据（作者，徽章，团队等）。

这是我的清单：

 <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>

Answer 1

您需要做的是扩展ListItem组件，然后通过道具传递数据。

比如说ListItemWithHover函数看起来像render

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

然后我想你可以用这种方式使用css

.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包装，list-item-extension是您要保留要显示的其他信息的位置。具有当前值的list-item-extension将在右侧，默认情况下是隐藏的。在鼠标悬停在list-item-with-hover上方时，它会显示。

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

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

鼠标悬停在ListItem上

1 个答案: