按钮在悬停时不会隐藏

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>

我创建了一个＆＃34;虚拟元素＆＃34;这样当我只得到一个＆＃34;加上＃34;时，内容就会以正确的方式居中。图标。

这里是CSS：

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

}

这是我得到的

当我按下按钮时，光标也会消失。 在我的浏览器开发工具中显示：

有关信息，我使用的是primeNg Button。

Answer 1

看起来你的CSS被其他CSS规则覆盖了。尝试将!important添加到您的CSS：

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

Answer 2

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

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