ng-bootstrap accordion图标样式问题：聚焦时星星图标消失求助

问题分析 #

从你描述的现象来看，星星图标在Accordion失焦时显示、聚焦后消失，大概率是ngb-accordion在:focus/:focus-within状态下的默认样式影响了图标，或是图标被聚焦后的面板元素覆盖了。另外要确保原生title tooltip正常触发，还得保证图标元素能被鼠标识别到。

具体解决步骤 #

1. 提升星星图标的样式优先级与显示层级

修改CSS，增加更高优先级规则，确保图标在任何状态下都不会被隐藏，同时调整层级避免被覆盖：

.icon-star2.relevant-source {
  position: absolute;
  margin-left: -5em;
  /* 强制保持显示，覆盖默认隐藏样式 */
  opacity: 1 !important;
  display: inline-block !important;
  /* 提高层级，避免被聚焦后的面板元素遮挡 */
  z-index: 10;
  /* 增加内边距，让tooltip更容易被触发 */
  padding: 0.25em;
}

2. 覆盖Accordion聚焦状态的影响

针对ngb-accordion面板聚焦时的样式，专门保留星星图标的显示：

/* 确保Accordion或面板聚焦时，星星图标依然可见 */
ngb-accordion:focus-within .icon-star2.relevant-source,
ngb-panel:focus .icon-star2.relevant-source {
  opacity: 1;
  display: inline-block;
}

3. 优化Tooltip触发的交互性

原生title需要元素能被鼠标hover到，给图标加上交互相关的样式：

.icon-star2.relevant-source {
  /* 确保鼠标可以识别到这个元素，触发tooltip */
  pointer-events: auto;
  cursor: help; /* 可选，给用户提示这是可查看tooltip的元素 */
}

4. 模板代码微调（可选）

给图标包裹一个容器，进一步隔离面板聚焦样式的影响：

<ngb-accordion class="accordion accordion-alternate">
  <ngb-panel class="source-accordion" *ngFor="let item of yourDataSource">
    <ng-template ngbPanelTitle>
      <span class="star-icon-wrapper">
        <i 
          *ngIf="item.relevantNum > 0" 
          class="icon-star2 relevant-source" 
          title="This source contains {{item.relevantNum}} of the top 10 most relevant documents."
        ></i>
      </span>
      <span class="source-link source-link-text">{{item.sourceName}}</span>
      <span class="float-right source-link">{{item.relevantNum | number:0 }}</span>
    </ng-template>
    <ng-template ngbPanelContent>
      List of documents
    </ng-template>
  </ngb-panel>
</ngb-accordion>

额外检查点 #

可以通过浏览器开发者工具的元素面板，查看Accordion聚焦状态下，星星图标的样式变化，确认是否有其他隐藏规则（比如display: none）在生效，针对性覆盖即可。

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