Detectar si se mueve sobre la imagen en div con jQuery

Tengo un ejemplo:


test



function handler(ev) {
    let target = $(ev.target);
    let elId = target.attr('id');
    if( target.is("div[id^='id_']") ) {
         let lastChar = elId.substr(elId.length - 1);
       alert('The mouse was over'+ lastChar );
    }
}
$("div[id^='id_']").mouseleave(handler);

Funciona de tal manera que si meto en un elemento, entonces se muestra la alerta - el problema ocurre si tengo sólo una imagen en este div - entonces no funciona. Cómo hacer que funcione aún más si solo tengo una foto como esta, por ejemplo. Tengo:

Pregunta hecha hace 3 años, 4 meses, 26 días - Por pixelpioneerx

3 Respuestas:

  • Uso $(ev.currentTarget) o $(this) referencia al elemento que coincide con el selector en lugar de cualquier objetivo que es un descendiente

    function handler(ev) {
   
    console.clear();   
    let $div = $(ev.currentTarget);
    let elId = $div.attr('id');
    console.log('currentTarget id:', elId)
    
    $div= $(this);
    elId =$div.attr('id');
    console.log('this id:', elId)
}
$("div[id^='id_']").mouseleave(handler);
    .class1{ margin : 1em; border: 1px solid green
    

    

    test 1
    

    

    

    test 2

    Respondida el Dec 20, 2020 a las 14:46 - por scriptwarrior

    Votos positivos: 0 | Votos negativos: 0

  • Para detectar si se mueve sobre la imagen dentro del div con la clase class1, puedes modificar la condición en la función handler para verificar si el elemento objetivo es la imagen en lugar del div mismo. Aquí te dejo el código actualizado para lograr esto:

    javascript
function handler(ev) {
    let target = $(ev.target);
    if (target.is("img")) {
        let parentDiv = target.closest("div[id^='id_']");
        if (parentDiv.length > 0) {
            let elId = parentDiv.attr("id");
            let lastChar = elId.substr(elId.length - 1);
            alert("The mouse was over "+ lastChar);
        }
    }
}

$("div[id^='id_']").on("mousemove", handler);

    Con esta modificación, ahora la función handler verifica si el elemento objetivo es una imagen. Luego, busca el div padre más cercano que cumpla con el selector div[id^='id_']. Si se encuentra dicho div padre, se obtiene su id y se muestra la alerta correspondiente.

    Además, en lugar de usar el evento mouseleave, he cambiado a mousemove para que la alerta se muestre mientras el cursor se mueve sobre la imagen.

    Con estos ajustes, el código debería funcionar correctamente incluso si solo tienes una imagen dentro del div con la clase class1.

    Respondida el Dec 21, 2020 a las 14:49 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Para detectar si el puntero del mouse se mueve sobre una imagen dentro de un div usando jQuery, puedes usar el siguiente código:

    javascript
$("div[id^='id_']").on("mousemove", "img", function(ev) {
    let target = $(ev.target);
    let elId = target.closest("div[id^='id_']").attr('id');
    if( target.is("img") ) {
         let lastChar = elId.substr(elId.length - 1);
       alert('The mouse was over '+ lastChar );
    }
});

    En este código:

    • Seleccionamos el `div` con el atributo `id` que comienza con `id_` usando `$("div[id^='id_']")`.
    • Usamos el evento `mousemove` para detectar el movimiento del puntero del mouse dentro del `div`.
    • Dentro del controlador de eventos, usamos `closest()` para obtener el `div` principal más cercano que contiene la imagen.
    • Obtenemos el `id` del `div` principal usando `attr('id')`.
    • Verificamos si el elemento sobre el que se movió el mouse es una imagen usando `target.is('img')`.
    • Si es una imagen, extraemos el último carácter del `id` del `div` principal y mostramos una alerta con un mensaje que indica que el mouse se movió sobre la imagen.

    Ejemplo:

    html

    
  

    

    javascript
$("div[id^='id_']").on("mousemove", "img", function(ev) {
    let target = $(ev.target);
    let elId = target.closest("div[id^='id_']").attr('id');
    if( target.is("img") ) {
         let lastChar = elId.substr(elId.length - 1);
       alert('The mouse was over '+ lastChar );
    }
});

    Este código detectará el movimiento del puntero del mouse sobre la imagen dentro del div y mostrará una alerta con el último carácter del id del div principal.

    Respondida el Dec 21, 2020 a las 14:56 - por Gemini

    Votos positivos: 0 | Votos negativos: 0