悬停没有反应答案

【问题标题】：Hover doesn't react悬停没有反应
【发布时间】：2022-01-07 10:42:50
【问题描述】：

我的悬停根本不起作用。我需要我的元素只在我将鼠标悬停在它上面时才显示出来，但我无法让它工作。

我不知道是否有必要将i标签替换为a，或者错误是否在css中。我也试过display: none和display: block，但问题仍然没有解决。会是什么？

我的html：

                        <div class="vertical-line"></div>
                        <div>
                            <h4>{{ banner.textPrimary }}</h4>
                        </div>
                        <div>
                            <h2>{{ banner.textSecondary }}<br /></h2>
                        </div>
                        <div class="vertical-line"></div>

                        <div>
                            <a href="{{ banner.buttonLink }}" target="_blank">
                                <button
                                    [style.background-color]="banner.buttonColor"
                                    style="border: solid 1px"
                                    class="btn-about-us"
                                    mat-raised-button
                                    color="primary"
                                >
                                    {{ banner.buttonText }}
                                </button>
                            </a>
                        </div>
                    </div>
                    <i
                    (click)="openBannerDeleteModal(banner.uuid)"
                    *ngIf="isAdminFlag === 'true'"
                    class="fas fa-trash-alt delete-modal"
                    id="banner-delete"
                    aria-hidden="true"
                ></i>

还有我的 CSS：

.delete-modal{
    cursor: pointer;
    position: absolute;
    bottom: 80%;
    left: 91%;
    z-index: 1000;
    visibility: hidden;
}

.delete-modal:hover{
   visibility: visible;
}

【问题讨论】：

@AlbertoCasasOrtiz 请不要代表其他用户翻译问题。翻译应由用户自己完成，见FAQ answer。

标签： javascript html css angular typescript

【解决方案1】：

你不能将鼠标悬停在页面上不可见的东西上，这样你的悬停事件就不会被触发，

而是将鼠标悬停在父元素上，然后在所需元素上执行 visibilty:visible。

【讨论】：

【解决方案2】：

对于visibility: hidden;，悬停不起作用，这是正常行为。
我认为在你的情况下opacity 会更好。

.delete-modal {
  ...
  opacity: 0;
}

.delete-modal:hover {
  ...
  opacity: 1;
}

【讨论】：