fire onmouseover when element disabled

by Kyle Mitofsky

HTML

<div>
    <select onmouseover="incrementSiblingCounter(this);">
        <option>Enabled</option>
    </select>
    <span class="counter">0</span>
</div>

<div>
    <select disabled="disabled" class='enableMouseEvent'
            onmouseover="incrementSiblingCounter(this);">
        <option>Disabled</option>
    </select>
    <span class="counter">0</span>
</div>







<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Post: <a href='http://stackoverflow.com/q/18113937/1366033'>Fire onmouseover event when element is disabled</a><br/>
    jQuery API: <a href='http://api.jquery.com/disabled-selector/'>:disabled() selector</a><br/>
    jQuery API: <a href='http://api.jquery.com/wrap/'>.wrap() method</a><br/>
    jQuery API: <a href='http://api.jquery.com/attr/'>.attr() method</a><br/>
<div>

CSS

select {
    margin-bottom: 40px;
}
div, select {
  outline: 1px solid lightgrey;
}

JavaScript

$(function () {
    $(".enableMouseEvent:disabled").wrap(function() {
        return '<div onmouseover="' + $(this).attr('onmouseover') + '" />';
    });
});
function incrementSiblingCounter(el) {
	val = $(el).next(".counter").html(function(i, val) { return +val+1 })
}