html - 按钮在悬停时不会隐藏

Question

除了最后一个按钮，我会隐藏一个按钮。但是，当我将鼠标放在主要元素上时，它们就会显示出来。

这是我的HTML

<p-growl [(value)]="msgs"></p-growl>
<div class="center" appMcard>
    <h2> Select Group (s) name(s) </h2>
    <form [formGroup]="GroupRMPM_FG" class="form">
        <div formArrayName="GroupId_Name"   *ngFor="let control of GroupRMPM_FG.controls.GroupId_Name.controls; let i= index" >
         <input  type="text" pInputText [formControl]="control.controls.Group_Id_Name"/>
            <button pButton type="button" class="delete-btn " *ngIf="GroupRMPM_FG.controls.GroupId_Name.controls.length > 1" (click)="deleteGroup(i)" icon="fa-minus" >
            </button>
            <button *ngIf="GroupRMPM_FG.controls.GroupId_Name.controls.length == i+1" pButton type="button" (click)="addNewGroup()" icon="fa-plus"  class="add-btn formcontainer"></button>


        <button *ngIf="GroupRMPM_FG.controls.GroupId_Name.controls.length != i+1" pButton type="button" class="dummyElement" icon="fa-plus" ></button>
        <button *ngIf="GroupRMPM_FG.controls.GroupId_Name.controls.length == 1" pButton type="button" class="dummyElement" icon="fa-plus" ></button>

        </div>
    </form>
<div>

我创建了一个“虚拟元素”，以便当我仅获得一个“加号”图标时，内容以正确的方式居中。

这是CSS：

.dummyElement, .dummyElement:hover{
    background-color:transparent;
    border-color: transparent;
    cursor:none;
    color: transparent;

}

这就是我得到的



当我在按钮上时，光标也消失了。
在我的浏览器开发工具中，向我展示：



有关信息，我使用primeNg Button。

Answer 1

请使用pointer-events: none;代替cursor:none，如下所示；

.dummyElement, .dummyElement:hover{
background-color:transparent;
border-color: transparent;
pointer-events: none;
color: transparent !important;
}