如何禁用W3.CSS悬停下拉，仅当按钮非禁用状态时触发展开？

问题1：disabled属性应该加在哪个元素上才能禁用悬停下拉？ #

W3.CSS的w3-dropdown-hover悬停触发逻辑是直接绑定在带该类的父容器（也就是你代码里的#A元素）上的，按钮#B的原生disabled属性只会控制按钮自身的交互样式，不会阻止父容器的悬停事件生效，所以只给按钮加属性达不到效果。

div类容器不支持原生disabled属性，推荐你用自定义类加CSS覆盖的方案实现，不需要改动原有W3.CSS类名：

1. 新增一段自定义CSS规则：

/* 禁用悬停下拉的规则 */
.w3-dropdown-hover.w3-dropdown-disabled:hover .w3-dropdown-content {
    display: none !important;
}

2. 给#A元素加w3-dropdown-disabled类，同时保留按钮#B的disabled属性维持禁用视觉效果即可。

你现在用的临时切换类为w3-dropdown-click的方案也可以正常生效，只是切换状态时需要多一步类名替换操作。

问题2：JS切换状态时应该操作哪个元素？ #

根据你选的实现方案不同，操作对象略有区别：

• 如果用自定义禁用类方案：需要同时操作两个元素
  1. 操作#B切换按钮原生禁用状态：$("#B").prop('disabled', 布尔值)
  2. 操作#A切换悬停禁用类：$("#A").toggleClass('w3-dropdown-disabled', 布尔值)
• 如果用临时切换类方案：同样操作两个元素
  1. 操作#B切换按钮原生禁用状态：同上
  2. 操作#A切换下拉触发类：禁用时替换类为w3-dropdown-click，启用时替换回w3-dropdown-hover

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