Angular 4中按钮含disabled属性时悬停禁用图标不显示问题求助

嘿，这个问题我之前也踩过坑！核心原因是浏览器对disabled状态的元素默认会忽略鼠标事件，包括hover伪类，所以你写的hover样式根本触发不了。下面给你几个靠谱的解决方案，结合你的Angular代码来调整：

方案一：用容器包裹按钮，把hover逻辑放在容器上 #

这个方法最稳妥，容器不会被disabled属性影响，能正常响应hover事件，同时按钮保持原生disabled的功能状态。

修改你的HTML结构：

<form (ngSubmit)='onSubmit(form)' *ngIf="!submitted" #form="ngForm">
  <input required #password="ngModel" [(ngModel)]="stackDefaultData.password" name="password" type="password" class="form-control">
  <!-- 给按钮套一个容器，绑定disabled状态类 -->
  <div class="btn-wrapper" [class.btn-disabled]="form.invalid">
    <button type="submit" [disabled]="form.invalid">提交</button>
  </div>
</form>

然后写对应的CSS：

.btn-wrapper {
  position: relative;
  display: inline-block; /* 让容器和按钮宽高匹配 */
}

/* 容器处于禁用状态时，hover显示图标 */
.btn-wrapper.btn-disabled:hover::after {
  content: '';
  /* 替换成你的禁用图标样式，比如用背景图 */
  background-image: url('你的禁用图标路径');
  background-size: 20px 20px;
  width: 20px;
  height: 20px;
  position: absolute;
  right: -25px; /* 按需调整图标位置 */
  top: 50%;
  transform: translateY(-50%);
}

/* 可选：给disabled按钮加视觉弱化样式 */
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

方案二：强制开启disabled按钮的鼠标事件（谨慎使用） #

如果你不想改动HTML结构，可以尝试给disabled按钮强制开启pointer-events，但要注意：这样按钮看起来能被hover，但实际因为disabled属性，点击还是无效的，只是能触发hover样式。

CSS代码：

button:disabled {
  pointer-events: all; /* 强制开启鼠标事件 */
  opacity: 0.6;
}

button:disabled:hover::after {
  /* 这里写你的禁用图标样式 */
  content: url('你的禁用图标路径');
  /* 按需添加定位样式 */
}

这个方法简单，但部分浏览器可能有兼容性问题，用户体验上也有点微妙，所以优先推荐方案一。

方案三：结合Angular自定义状态类绑定 #

直接给按钮绑定自定义的禁用类，配合hover使用，更贴合Angular的写法：

HTML修改：

<button type="submit" [disabled]="form.invalid" [class.custom-disabled]="form.invalid">提交</button>

CSS：

button.custom-disabled:hover::after {
  /* 禁用图标样式 */
}

同样需要注意，还是得配合pointer-events: all才能确保hover触发，本质和方案二类似。

你可以根据自己的需求选一个方案试试，我个人常用方案一，既能保证功能正常，又能完美触发hover图标~

内容的提问来源于stack exchange，提问作者Voolapati Manohar