Fire Onmouseover Event When Element Is Disabled

Fire onmouseover event when element is disabled

Disabled elements do not fire events, e.g. users cannot hover or click them to trigger a popover (or tooltip). You can however wrap the disabled element with a DIV and listen to the event fired on that element instead.

Does jQuery not fire hover event on a disabled button?

You could put a transparent overlay over the button and put the tooltip on that.

http://jsfiddle.net/yL2wN/

<div id="wrapper">
    <div id="overlay"></div>                
    <button disabled>BUTTON</button>
</div>

#wrapper{
    position: relative;   
}
#overlay{
    position: absolute;        
    top: 0;
    left: 0;

    opacity: .1;
    height: 20px;
    width: 70px;
}

In the fiddle, I set the color to blue just so you can see what's going on. The width and height of the overlay can be adjusted as needed or made dynamic in js.

onmouseover doesn't function when onchange does?

In HTML, disabled elements don't fire events, you can't hover or click them.
You can wrap such element within a div and fire mouseover on that div.
Here's code:

<form action="/action_page.php">
   <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
  <div style="display: inline;padding: 10px;" id="wrapper_submit">
    <input disabled id="submit" type="submit">
  </div>
  <p id="number"></p>
 </form>
<script>
  // After page load
  window.onload = function(){
    // Get div and on its mouseover
    document.getElementById("wrapper_submit").onmouseover = function(){
      var x = document.getElementById("quantity");
      var y = document.getElementById("submit");
      if (x.value > "5") y.disabled = true;
      else if(x.value >= "1") y.disabled = false;
    }
  }
</script>

Edit: Mouseover event only fires when cursor is over element it self, it will not fire if child element covers parent. In above case if you remove padding from [Div('wrapper_submit')], mouseover event will not work.
Use mouse enter event, it works even if child covers parent 100%.

document.getElementById("wrapper_submit").onmouseenter = function(){
      var x = document.getElementById("quantity");
      var y = document.getElementById("submit");
      if (x.value > "5") y.disabled = true;
      else if(x.value >= "1") y.disabled = false;
    }

Opera firing mouse events on disabled input element

Can you please try making the INPUT element disabled by default (add disabled="disabled" in the INPUT tag from start). Then see if Opera is still responding to mouse hover. This may not fix the issue right away but will help in figuring out the cause.

Also, another approach could be to call the JS function on mouse event and check if the element is disabled or not. If it is disabled then dont change the src attribute.

HTH,

Javascript onmouseover & onmouseout not working to disable button

Disabled elements do not fire events. You can place a element over top of the element and listen to the event fired on that element.

Javascript OnMouseOver and Out disable/re-enable item problem

The inputs do not fire the mouseout events because they are disabled.

So you have to wrap it in a div and catch the div's events.

If you want pure javascript, use Phaedrus's example "toggleDisabled" script.

If you want jQuery and not-so-newbie friendly:

<html>
<head>
   <title>Page</title>  
   <script src="jquery-1.3.2.min.js"></script>
   <script>
       $(function() {
           function toggleDisabled(d) {
               var disable = d;
               this.disableChildren = function() { $(this).children().each(function() { this.disabled = d; }); }
           }
           $("form .radios").hover(new toggleDisabled(true).disableChildren, new toggleDisabled(false).disableChildren);
       });
   </script>
</head>
   <body>
        <form>
           <div class="radios">
               <input type="radio" name="rigged" value="1"/> Item One<br />
               <input type="radio" name="rigged" value="2"/> Item Two<br />
               <input type="radio" name="rigged" value="3"/> Item Three<br />
               <input type="radio" name="rigged" value="4"/> Item Four
            </div>
        </form>      
   </body>
</html>

Javascript: enable/disable button with mouseover/mouseout

You should set the mouseout to disabled = '' instead.

<input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;" onmouseout="this.disabled='';">

The disabled property only looks to see if it's there at all. You can set disabled='anything' and it will be disabled. It used to be that you only needed the keyword disabled in your attributes but for valid XHTML you need to set every attribute equal to something.

EDIT:
I played around with this a little bit and added some padding to the SPAN tag and it allows the events to work properly. Without padding, it's not trapping the events because the input button is disabled. I just made the background red so it was easy to see the area the SPAN used up.

<span style="padding: 8px; background: red;"  onmouseout="this.firstChild.disabled='';"><input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;"></span>

ng-mouseover on disabled button in Angularjs

It's not possbile. Actually it has nothing to do with Angular. It's expected behaviour when browsers are not supposed to fire onmouseover, onclick, etc. events on disabled form controls. So you can't do it directly.

Can't do it directly - meaning, that you can bind mouseover even to wrapping container which would not have this limitation. Then you would need to control action and proceed only if disabled flag is true or false if you need.

That being said, you should probably not try to workaround this behaviour. Form UX perspective disabled control should not be interaction-able, after all that's what disabled means.

Fire Onmouseover Event When Element Is Disabled