Aquí está mi HTML:
<div id="doc1" class="document-container-title"> <h3>Doc 1</h3> </div> <div id="doc2" class="document-container-title"> <h3>Doc 2</h3> </div> <div id="doc3" class="document-container-title"> <h3>Doc 3</h3> </div> Como puede ver, cada div tiene una clase de 'document-container-title'. Quiero agregar algo de JavaScript para detectar si alguno de estos divs se desplazó, y luego quiero averiguar sobre qué div específico se desplazó. Específicamente, quiero poder detectar si se pasó el cursor sobre un div con la clase de document-container-title . Si es así, entonces quiero obtener la identificación del div exacto sobre el que se pasó el cursor.
Solo tengo un mes en JavaScript, por lo que una explicación útil no estaría de más.
Gracias.
PD No me importa usar jQuery.
Una solución es esta:
const elements = document.getElementsByClassName('document-container-title') for (let element of elements) { element.addEventListener('mouseenter', (e) => { console.log(e.target.id); }); } Primero, iterará sobre su DOM para obtener todos los elementos con la clase especificada. Los elements constantes definidos ahora son una matriz de elementos html que tienen la clase document-container-title . Después de eso, tendrá un ciclo for simple para iterar sobre todos los elementos reunidos. Finalmente, agregará un detector de eventos para el elemento actual en el bucle for que activará el evento mouseenter . Luego, puede obtener fácilmente el objetivo con su identificación correspondiente.
puede usar el evento jQuery mouseover o mouseenter según sus requisitos de esta manera:
Basado en esto :
El evento mouseover se activa cuando el puntero del mouse ingresa al elemento div y sus elementos secundarios.
Sin embargo
El evento mouseenter solo se activa cuando el puntero del mouse ingresa al elemento div.
$(".document-container-title").mouseover(function (e) { console.log(e.currentTarget.textContent); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="doc1" class="document-container-title"> <h3>Doc 1</h3> </div> <div id="doc2" class="document-container-title"> <h3>Doc 2</h3> </div> <div id="doc3" class="document-container-title"> <h3>Doc 3</h3> </div>