Javascript 单击“隐藏”单选按钮在“角度9”中不起作用

我在

div

中使用了以下样式的单选按钮（用于通过单击

div

进行选择）：

将css可见性更改为不透明度

你能创建stackblitz@ğağrıOk当然。@ğağrı由于“可见性：隐藏”复选框没有对事件做出反应。例如，当不透明度为0时，它将触发。
.plans-list {
  display: flex;
  justify-content: center;
  margin: 2rem 0;

  .plan {
    display: flex;
    margin: 0 0.5rem;
    position: relative;

    &:hover {
      ::ng-deep .card {
        cursor: pointer;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
          0 2px 10px 0 rgba(0, 0, 0, 0.12);
      }
    }

    &__type {
      display: block;
      width: 100%;
      height: 100%;
      visibility: hidden;
      position: absolute;
      z-index: 2;
    }
  }
}

<div class="plans-list">
        <div class="plan" *ngFor="let plan of planTypes">
            <input (click)="calculateTotal()" class="plan__type" type="radio" name="planType" [value]="plan.value"
                formControlName="planType" #planType>
            <app-plan-item [type]="plan.title" [active]="planType.checked" [params]="planParameters">
            </app-plan-item>
        </div>
    </div>

.plan__type {
      display: block;
      width: 100%;
      height: 100%;
      opacity:0; 
      position: absolute;
      z-index: 2;
    }