如何禁用Bootstrap图标的hover效果？设置disabled后hover仍生效

SVG元素本身不支持原生的disabled属性（该属性仅针对表单控件生效），所以你设置disabled后只会添加这个属性，但不会自动禁用hover或点击行为。下面是两种可靠的解决方法：

方法1：添加自定义禁用类（推荐） #

先在CSS里定义禁用状态的样式，直接覆盖hover效果：

/* 自定义禁用类 */
.icon-disabled {
  pointer-events: none; /* 完全阻止所有交互（点击、hover等） */
  opacity: 0.5; /* 视觉上标记为禁用状态 */
  cursor: not-allowed; /* 鼠标悬停时显示禁用光标 */
}

/* 强制覆盖原有hover样式 */
.icon-disabled:hover {
  color: inherit !important; /* 继承父元素颜色，取消hover变色 */
  transform: none !important; /* 取消hover时的变换效果（如果有的话） */
  /* 可根据你原有hover样式添加更多覆盖规则 */
}

然后用JavaScript添加/移除这个类，同时管理点击事件：

// 禁用图标
$('#id-topdashboard-icon-refresh')
  .addClass('icon-disabled')
  .off('click'); // 移除原有点击事件

// 恢复图标可用
$('#id-topdashboard-icon-refresh')
  .removeClass('icon-disabled')
  .on('click', ViewFunctionFront_ShuffleMapCitiesButton); // 重新绑定点击事件

方法2：通过属性选择器覆盖样式 #

如果你想保留disabled属性，也可以用CSS属性选择器直接针对带disabled属性的SVG：

#id-topdashboard-icon-refresh[disabled],
#id-topdashboard-icon-refresh[disabled]:hover {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
  color: inherit !important;
  /* 覆盖所有原有hover相关样式 */
}

注意：这种方式依赖浏览器对SVG自定义属性的识别，兼容性略逊于自定义类的方案。

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