hover时label不显示求助：hidden-btn-txt无法触发显示

我看了你的代码，问题主要出在CSS的hover逻辑没写对，还有默认状态的设置不符合你的需求。咱们一步步来调整：

问题分析 #

• 你当前的#hidden-btn-txt默认是display: inline-block，也就是一直处于显示状态，这和你“鼠标悬停时才显示”的需求相反。
• 你定义了.hover类，但没有将其与元素的hover事件关联，父元素的hover触发逻辑也缺失。
• 针对你提到的“鼠标悬停在该label上时完全不显示”的特殊需求，咱们也会一起处理。

修改后的完整代码 #

调整后的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;
  }
}

/* 默认隐藏label */
.hidden-btn-txt{
  display: none;
  color: #20455e;
  font-size: 12px;
  font-style: normal;
  text-align: right;
  float: right;
}

/* 鼠标悬停在父容器.hidden-btn时，显示label */
.hidden-btn:hover .hidden-btn-txt {
  display: inline-block;
}

/* 鼠标直接悬停在label上时，隐藏它 */
.hidden-btn-txt:hover {
  display: none;
}

对应的TSX调整 #

注意：原代码中使用了重复的id="hidden-btn-txt"，这不符合HTML规范（id必须唯一），建议改为class：

return (
  <ul className='tickets'>
    {filteredTickets.map((ticket) => (
      <li key={ticket.id} className='ticket'> 
        <div className="hidden-btn" onClick={this.onHide.bind(this, ticket.id)} > 
          {/* 把id改为className */}
          <label className="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>
);

改动说明 #

1. 默认隐藏label：将.hidden-btn-txt的默认display设为none，实现初始隐藏效果。
2. 父容器hover触发显示：通过.hidden-btn:hover .hidden-btn-txt，让鼠标悬停在父容器时显示label。
3. label自身hover隐藏：添加.hidden-btn-txt:hover { display: none; }，满足你“鼠标悬停在label上时不显示”的需求。
4. 修复id重复问题：将id改为class，确保多个ticket的label都能正常工作，符合HTML规范。

内容的提问来源于stack exchange，提问作者michele abr