悬停时标签不显示

Question

嗨，我希望在悬停时显示标签“hidden-btn-txt” 但是当鼠标在标签上时它根本不显示 我试图将鼠标悬停在“hidden-btn”上，但它不起作用

tsx 中的html：

  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;
            }

Answer 1

使用这样的方法应该可以帮助您解决问题：

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