悬停没有反应

Posted 2023-03-13

【中文标题】悬停没有反应

【英文标题】：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。

【参考方案1】：

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

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

【参考方案2】：

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

.delete-modal 
  ...
  opacity: 0;


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