javascript – How can I make an event work on a disabled JS element?

Question:

I have a disabled select and I want that if you try to click or hover over it, show a message to warn the reason why it is disabled, but apparently the events do not work with disabled elements, so I do not know if there is a way to do what I say, I already have the method, it's just making it work with an event. I leave the HTML and the method in JavaScript

HTML of the select

<div class="form-group row ml-1 justify-content-center">
            <label for="empleado" class="col-form-label">Empleado:</label>
            <div class='col-sm-4 mr-3'>
                <select type="text" class="custom-select" onmouseover="empleadoIsEmpty()" id="empleado" name="empleado" disabled="disabled">
                    <option value="0">Seleccionar empleado</option>
                    <?php 
                        for ($i=0; $i < count($empleados); $i++) { 
                            echo "<option value='{$empleados[$i]['id_empleado']}'>{$empleados[$i]['nombres']} {$empleados[$i]['apellidos']}</option>";
                        }
                    ?>
                </select>
            </div>

JS

function empleadoIsEmpty(){
    empleado = document.forms["formRegistro"]["empleado"];

    if(empleado.disabled){
        msg = "<ul>";
        msg += "<li> Debes seleccionar fecha y sede para habilitar los empleados </li>" 
        msg += "</ul>";

        document.getElementById("errores").innerHTML = msg;
    }else{
        console.log("no entré");
    }
}

Thanks in advance.

Answer:

You should note that disabled elements do not fire mouse events.

Having this as a base then it occurs to me to create a mask inside the parent container of the select . Said mask will have an absolute position and will be the element to which the event will be assigned and its display property will depend on the state in which the select is:

 function empleadoIsEmpty(){ empleado = document.forms["formRegistro"]["empleado"]; if(empleado.disabled){ msg = "<ul>"; msg += "<li> Debes seleccionar fecha y sede para habilitar los empleados </li>" msg += "</ul>"; document.getElementById("errores").innerHTML = msg; }else{ console.log("no entré"); } }

 #contenedor{ position: relative; } /* Aplicamos la instrucción de que si el elemento "empleado" es disabled entonces su elemento hermano "mascara" tendrá un display block */ #empleado:disabled + #mascara{ display: block; } #mascara{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; }

 <form name="formRegistro"> <label for="empleado" class="col-form-label">Empleado:</label> <div class='col-sm-4 mr-3' id="contenedor"> <select type="text" class="custom-select" id="empleado" name="empleado" disabled="disabled"> <option value="0">Seleccionar empleado</option> </select> <div id="mascara" onmouseover="empleadoIsEmpty()"></div> </div> <div id="errores"></div> </form>