Disable W3.CSS Hover Dropdown

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.

But 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 buttons, inputs, etc.

Where do I put the disabled?

When I am ready in my javascript, how do I remove/reapply the disabled? By that I mean, on which of "A", "B" or "C" do I apply the jQuery $("#A_Letter").prop('disabled', false);

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.

Thanks for the reply, but I want the user to know it is there, so I do not want it hidden, I just want it greyed and disabled. — Rewind, Oct 12 '21 at 10:24

0stone0 · Accepted Answer · 2021-10-12T10:37:12.127

I'd apply some css to 'disable' the pointer 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>

Yep, `pointer-events` worked. Thanks for that. I'll also put the `disabled` on `"B"` so it is visually clear to the user. Thanks. — Rewind, Oct 12 '21 at 10:28

Disable W3.CSS Hover Dropdown

1 Answers1