javascript - 鼠标悬停在列表项上

Question

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

Answer 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 对象作为 Prop 传递给新的 ListItemWithHover 组件，以便您可以在那里使用它。

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