如何实现鼠标悬停禁用状态按钮时显示其他非子元素？

问题根因 #

你的代码不生效是三个核心原因导致的：

• CSS相邻兄弟选择器+只会匹配紧跟在目标元素后面的第一个同级元素，你的提示消息在页面另一侧，和按钮不是相邻同级关系，该选择器完全无法匹配到提示元素。
• 带原生disabled属性的表单元素，浏览器会默认屏蔽它的所有鼠标事件，不管是CSS的:hover伪类，还是jQuery绑定的hover事件，都无法在禁用状态的按钮上直接触发。
• 你写的jQuery代码只处理了鼠标移入显示提示的逻辑，没有写鼠标移出隐藏的逻辑，就算事件能触发，提示也会一直常驻无法关闭。

可落地实现方案 #

优先选择无侵入的包裹层方案，不改动按钮原生disabled属性的语义和行为，兼容性最好。

方案1：纯CSS实现（无JS，适合提示元素和按钮在同一父级下的场景） #

1. 给按钮套一层行内块级包裹元素，用来接收鼠标事件：

<!-- 按钮外层加包裹器 -->
<span class="disabled-btn-wrap" style="display: inline-block;">
  <button type="submit" 
  class="btn-close" 
  id="disabledCloseBtn" 
  name="disabledCloseBtn" 
  disabled 
  aria-label="Close">
  </button>
</span>

<!-- 提示元素放在你需要的任意位置，只要和包裹器属于同一个父元素即可 -->
<span id="deleteManagerWarning">Unable to delete Manager</span>

2. 替换原有CSS代码，用通用兄弟选择器匹配提示元素，hover事件绑定在包裹器上：

#deleteManagerWarning{
  display: none;
  color: red;
  float: right;
}
/* 匹配包裹器后面所有同级的提示元素，不需要紧挨着 */
.disabled-btn-wrap:hover ~ #deleteManagerWarning{
  display: block;
}

方案2：jQuery实现（适配提示元素和按钮完全不在同一层级的场景） #

1. HTML结构和方案1一致，给按钮加外层包裹器即可，提示元素可以放在页面任意位置。
2. 替换原有jQuery代码，把hover事件绑定在包裹器上，同时补全鼠标移出隐藏的逻辑：

$(".disabled-btn-wrap").hover(
  function () {
    // 鼠标移入显示提示
    $("#deleteManagerWarning").css("display", "block");
  },
  function () {
    // 鼠标移出隐藏提示
    $("#deleteManagerWarning").css("display", "none");
  }
);

备选方案（不想加额外DOM包裹层时使用） #

如果不想新增包裹标签，可以去掉按钮原生的disabled属性，通过类名模拟禁用样式，同时手动阻止按钮的点击/提交行为：

1. 修改按钮HTML，移除原生disabled属性：

<button type="submit" 
class="btn-close" 
id="disabledCloseBtn" 
name="disabledCloseBtn" 
aria-label="Close">
</button>

2. 新增禁用样式，替换原有CSS：

#deleteManagerWarning{
  display: none;
  color: red;
  float: right;
}
/* 模拟禁用按钮样式 */
#disabledCloseBtn.is-disabled{
  opacity: 0.6;
  cursor: not-allowed;
}

3. JS代码处理禁用逻辑和hover交互：

// 给按钮加禁用状态类
$("#disabledCloseBtn").addClass("is-disabled");
// 阻止禁用状态下的点击提交行为
$("#disabledCloseBtn").on("click", function(e){
  if($(this).hasClass("is-disabled")){
    e.preventDefault();
    return false;
  }
});
// 绑定hover事件
$("#disabledCloseBtn").hover(
  function () {
    $("#deleteManagerWarning").show();
  },
  function () {
    $("#deleteManagerWarning").hide();
  }
);

注意：该方案丢失了原生disabled属性的语义化能力，表单提交时需要额外处理按钮值的提交逻辑，非必要不推荐使用。

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