label doesn't display when hover - html

Question

hi I want the label "hidden-btn-txt" display when hover
but It doesnt show at all when the mouse is on the label
i tried to do hover to the "hidden-btn" but it doesnt work
html in 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;
}

Answer 1

Using something like this should help your casue:
onHover = () => {
//Apply your classes here.
}
<label id="hidden-btn-txt" onMouseOver={this.onHover}>Hide</label>