ярлык не отображается при наведении - PullRequest
Новая
       13

ярлык не отображается при наведении

0 голосов
/ 30 октября 2019

Привет, я хочу, чтобы при наведении курсора отображался ярлык "hidden-btn-txt", но он вообще не отображается, когда мышь находится на ярлыке. Я пытался навести указатель мыши на "hidden-btn", но он не работает

html в tsx: 

  return (<ul className='tickets'>*
            {filteredTickets.map((ticket) => (<li key={ticket.id} className='ticket'>
                <div className="hidden-btn" onClick={this.onHide.bind(this, ticket.id)} >
                    <label id="hidden-btn-txt">Hide</label>
                </div>
                <h5 className='title'>{ticket.title}</h5>
                <p className='content'>{ticket.content}</p>
                <footer>
                    <div className='meta-data'> <span> By {ticket.userEmail} | { new Date(ticket.creationTime).toLocaleString()}</span>
                        {ticket.labels ? this.renderLabels(ticket.labels): null}
                    </div>
                </footer>
            </li>))}
        </ul>);

css: 

 .ticket {
            width: 100%;
            flex-shrink: 0;
            border-radius: 8px;
            background-color: #fff;
            box-shadow: 0 2px 6px 1px #e1e5e8;
            margin-bottom: 14px;
            display: flex;
            flex-direction: column;
            border: 1px solid #fff;
            padding: 10px 20px;
            transition: box-shadow .2s ease-in-out;
            position: relative;

            &:hover {
                box-shadow: 0 2px 6px 1px #d3d7da;
            }
            #hidden-btn-txt{
                display: inline-block;
                color:  #20455e;
                font-size: 12px;
                font-style: normal;
                text-align: right;
                float: right;

            }
            #hidden-btn-txt.hover{
                display: inline-block;
            }

1 Ответ

0 голосов
/ 30 октября 2019

Использование чего-то подобного должно помочь вашей ситуации: 

onHover = () => {
    //Apply your classes here. 
}
<label id="hidden-btn-txt" onMouseOver={this.onHover}>Hide</label>
...