禁用 W3.CSS 悬停下拉菜单

Question

我有典型的 W3.CSS 悬停下拉菜单，但我希望在准备好之前禁用它：

<div id="A" class="w3-dropdown-hover" style="width: 100%;">
    <button id="B" disabled class="w3-button" style="width: 100%;">Hover To Open</button>
    <div id="C" class="w3-dropdown-content w3-bar-block w3-border" style="width: 100%;">
        <p>2B</p>
        <p>|| !2B</p>
    </div>
</div>

如您所见，我已将disabled button放在button ，它看起来像您期望的那样禁用。

但是当我悬停时下拉菜单仍然出现。 我不要那个。 我只希望在按钮未禁用时打开下拉菜单。

您显然不能将disabled放在C ，因为disabled只适用于button 、 input等。

我把disabled放在哪里？

当我准备好使用 javascript 时，如何删除/重新应用disabled ？ 我的意思是，我在“A”、“B”或“C”中的哪一个上应用了 jQuery $("#A_Letter").prop('disabled', false);

编辑：我唯一能想到的就是在按钮上disabled并暂时将“A”的类更改为w3-dropdown-click 。

Answer 1

我会应用一些 css 来“禁用”指针事件，这样您的浏览器就不会检测到任何悬停操作：

<div id="A" class="w3-dropdown-hover" style="width: 100%; pointer-events: none;">

演示片段：

 <link href="https://cdnjs.cloudflare.com/ajax/libs/w3-css/4.1.0/w3.css" rel="stylesheet"/> <div id="A" class="w3-dropdown-hover" style="width: 100%; pointer-events: none;"> <button id="B" disabled class="w3-button" style="width: 100%;">Hover To Open</button> <div id="C" class="w3-dropdown-content w3-bar-block w3-border" style="width: 100%;"> <p>2B</p> <p>|| !2B</p> </div> </div>

---

当我准备好使用 javascript 时，如何删除/重新应用禁用的

对于自动切换两种状态，我们可以：

• 将pointer-events:none移动到 CSS 类，以便我们可以使用toggleClass()
• 使用prop 切换禁用状态

 function toggle() { $("#A").toggleClass('disabled-hover'); $('#B').prop('disabled', (i, v) => !v); }

 .disabled-hover { pointer-events: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/w3-css/4.1.0/w3.css" rel="stylesheet"/> <div id="A" class="w3-dropdown-hover disabled-hover" style="width: 100%;"> <button id="B" disabled class="w3-button" style="width: 100%;">Hover To Open</button> <div id="C" class="w3-dropdown-content w3-bar-block w3-border" style="width: 100%;"> <p>2B</p> <p>|| !2B</p> </div> </div> <button onclick='toggle()'>Toggle Disabled</button>