how to display div on mouseover on disabled button

Question

I have been working on the requirement that is to perform operations on a disabled button.I want to display a text on a disabled button, i tried in Jquery but its not working, below is the code which i tried.

$(function(){
     $(window).on("load", function () {
     $('#btn').prop("disabled", true);
      
     $("#btn[disabled]").mouseover(function(){
       $(".main").css({ "display": "block" });
       
     })
     $("#btn[disabled]").mouseout(function(){
       $(".main").css({ "display": "none" });
     })
     });
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button id="btn" disabled>Search</button>
     <div class="main" style="display:none">
      this is a div
     </div>

Why don't you simply use the title attribute `title="this is a div"?! — cнŝdk, Apr 19 '17 at 11:53
disabled elements do not fire events. Wrap your button in a div and fire the mouseover event on the same — gurvinder372, Apr 19 '17 at 11:54
Possible duplicate of [Fire onmouseover event when element is disabled](http://stackoverflow.com/questions/18113937/fire-onmouseover-event-when-element-is-disabled) — JJJ, Apr 19 '17 at 12:01
There is a hack solution for this http://stackoverflow.com/questions/9450641/does-jquery-not-fire-hover-event-on-a-disabled-button — , Apr 19 '17 at 12:08

DibsyJr · Answer 1 · 2017-04-19T12:09:17.740

8

You could do this with CSS instead like below:

#hiddenDiv { display: none; }
#btn[disabled]:hover + #hiddenDiv { display: block; }

<button id="btn" disabled>Search</button>
<div class="main" id="hiddenDiv">
    this is a div
</div>

What this is doing is initially setting hiddenDiv to display: none; and then on hover of the button it sets it to display: block;

edited Apr 19 '17 at 12:09

answered Apr 19 '17 at 11:57

DibsyJr

854
7
18

score 2 · Answer 2 · answered Apr 19 '17 at 12:02

2

Disabling buttons means turning their interactiveness off. While this is a different approach, you may want to achieve desired effect with CSS for browser speed.

button[disabled] + .main {
    display: none;
}

button[disabled]:hover + .main {
    display: block;
}

<button id="btn" disabled>Search</button>
<div class="main">this is a div</div>

answered Apr 19 '17 at 12:02

Kurak

86
7

i have done it in javasccript by using title, working mouse over of disbled button document.getElementById("id").title = "some text" i used this syntax in which function i disabled button. the way i did is correct? – Ramu Apr 21 '17 at 10:13

score 0 · Answer 3 · answered Apr 19 '17 at 11:56

Situation:

In HTML disabled elements don't fire any event and doesn't react to user actions, they are just shown with a grayed-out text.

You can see in the disabled MDN specification that :

If the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.

Solution:

Why don't you simply use the title attribute title="this is a div"?!

<button id="btn" title="this is a div" disabled>Search</button>

Here's a simple Demo snippet:

<button id="btn" title="this is a div" disabled>Search</button>

how to display div on mouseover on disabled button

3 Answers3