ListItem에서 마우스 오버

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 구성 요소를 확장하고 있습니다 :

이 내 목록입니다. 같은

뭔가 당신이

.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를 사용할 수있는 것 같아요 그리고

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

같은 ListItemWithHover 그 render 기능이 보이는 말과 list-item-extension 어디 당신은 당신이 표시하고자하는 다른 정보를 유지할 것입니다. 현재 값이있는 list-item-extension은 오른쪽에 있으며 기본적으로 숨겨져 있습니다. list-item-with-hover 위로 마우스를 올리면 표시됩니다.

물론 trendingPost 개체를 새 ListItemWithHover 구성 요소의 지주로 전달해야 사용할 수 있습니다.

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