鼠標懸停在一個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>

來源

2017-04-24 Jessie

你所要做的是擴大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>

來源

2017-04-25 04:33:07 mrinalmech

鼠標懸停在一個ListItem

回答

相關問題