悬停时不显示标签

Question

hi我希望悬停时显示标签"hidden btn txt"但是当鼠标在标签上时，它根本不显示我试着把鼠标悬停到"隐藏的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>