禁用 W3.CSS 悬停下拉菜单

Question

I have the typical W3.CSS hover dropdown, but I want it disabled until ready:

<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>

As you can see I have put the disabled on the button and it looks disabled as you would expect.

the dropdown still appears when I hover. I do not want that. I only want the dropdown to open when the button is not disabled.

You obviously cannot put the disabled on C , because the disabled only works on things like button s, input s, etc.

Edit: the only thing I can think of is put disabled on the button and momentarily change the class of "A" to w3-dropdown-click .

Answer 1

I'd apply some css to 'disable' thepointer events so your browser won't detect any hover actions:

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

Demo Snippet:

 <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>

---

When I am ready in my javascript, how do I remove/reapply the disabled

For the automatically toggling both states, we can:

• Move the pointer-events:none to a CSS class so we can use toggleClass()
• Use the prop to toggle the disabled state

 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>