鼠标悬停在 ListItem 上答案

【问题标题】：Mouseover on a ListItem鼠标悬停在 ListItem 上
【发布时间】：2017-04-24 23:49:13
【问题描述】：

想知道是否有人知道如何为 Material UI ListItem (http://www.material-ui.com/#/components/list) 实现鼠标悬停组件？由于“SecondaryText”只允许 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>

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

你要做的就是扩展ListItem组件，然后通过props传递数据。

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

【讨论】：