为什么 div 悬停被限制为 mat-grid-tile？

Question

我有一个 div，当用户将鼠标悬停在 mat-grid-tile 上时显示内容。

我希望它足够大以显示其所有内容，但是这种情况没有发生，因为它似乎被限制在垫子网格图块内。

悬停之前的样子：

悬停时的样子：

我希望它看起来像什么：

HTML：

<mat-grid-tile *ngFor="let quickPhrase of phrases.QuickPhraseList ; let i = index" [attr.data-index]="i"
                                   [ngClass]="{'selected':phraseSelected === quickPhrase.Phrase}"  >
                        <div class="phrase-box">
                            <p>{{quickPhrase.PhraseTitle != null ? quickPhrase.PhraseTitle.substring(0,25) : "Add Title"}}</p>
                            <span>
                                <p class="hover-phrase-title"><strong>Title:</strong><br>{{quickPhrase.PhraseTitle}}</p>
                                <p class="hover-phrase-content"><strong>Quick Phrase:</strong><br>{{quickPhrase.Phrase}}</p>
                            </span>
                        </div>
                        <mat-icon *ngIf="false" mat-list-icon dndHandle>
                            drag_handle
                        </mat-icon>
                    </mat-grid-tile>

CSS：

  .phrase-box {
    width: 100%;
    position: relative;
    margin: 0px;
    cursor: pointer;
    
  }
  
  span { display: none; }
  
  .phrase-box:hover > span {
    width: 84%;
    display: inline-block;
    position: absolute;
    top: -100px;
    left: 15%;
    border: 2px solid rgb(187, 186, 186);
    background-color: #fff;
    padding-left: 10px;
    z-index: 999;
  }

  .hover-phrase-title {
      margin-top: 10px;
  }
  .hover-phrase-content {
      margin-bottom: 10px;
  }

Answer 1

我弄清楚是什么原因造成的。有一个继承的 CSS 样式。溢出继承了隐藏的价值。我将 .mat-grid-tile 的 css 更改为：

overflow:visible;

现在它可以正常工作了。