como - getelementbyid javascript ejemplo

¿Cómo puedo encontrar el elemento actual en mouseover usando jQuery?

Question

¿Cómo puedo obtener el nombre de clase del elemento actual que está en mouseover? Por ejemplo

Cuando un mouse pasa de div a a , quiero obtener el nombre de clase de un elemento div. ¿Cómo puedo conseguirlo usando jQuery?

Answer 1

¿Desea el nombre de clase del div en el que se produce el evento mouseover? Si ese es el caso, entonces refiérase a esto,

HTML

<div class="a">aaaaaaaa</div>
<div class="b">bbbbbbbbb</div>

jQuery

$(document).on(''mouseover'', ''div'', function(e) {
    console.log($(e.target).attr(''class''));
});

jsFiddle

He utilizado el evento mouseover con destino

e.target proporciona el elemento en el que se produce ese evento.

Si desea obtener el nombre de clase de div después de salir del mouse, use el evento "mouseleave" instaed of "mouseover"

Answer 2

Desde jQuery API

 <div class="className">
      <span class="span">move your mouse</span>
    </div>



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(".className").mouseover(function() {
        var n = $(this).attr("class");
        $(".span").html("");
        $(".span").html("The class :"+n);
      });
   </script>

Answer 3

Esta es mi versión:

function handler(ev) {
var target = $(ev.target);
var elId = target.attr(''id'');
if( target.is(".el") ) {
   alert(''The mouse was over''+ elId );
}
}
$(".el").mouseleave(handler);

Fiddle de trabajo: jsfiddle.net/roXon/dJgf4

function handler(ev) {
    var target = $(ev.target);
    var elId = target.attr(''id'');
    if( target.is(".el") ) {
       alert(''The mouse was over''+ elId );
    }
}
$(".el").mouseleave(handler);

.el{
    width:200px;
    height:200px;
    margin:1px;
    position:relative;
    background:#ccc;   
    float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hover an element and refresh the page, than move your mouse away.</p>
<div id="element1" class="el"></div>
<div id="element2" class="el"></div>
<div id="element3" class="el"></div>
<div id="element4" class="el"></div>
<div id="element5" class="el"></div>
<div id="element6" class="el"></div>
<div id="element7" class="el"></div>
<div id="element8" class="el"></div>
<div id="element9" class="el"></div>

Answer 4

Esto debería funcionar:

define una clase en tu hoja de estilo:

.detectable-div{
    border: white solid 1px;
}

.detectable-div:hover{
    border: red solid 1px;
}

entonces en tu js:

$(''div.detectable-div:hover'').mouseover(function () {
    $(this) // this is your object
})

Answer 5

Lo que la mayoría de la gente ha descuidado es esta solicitud del OP:

When mouse over div from a

Lo que significa que necesita saber que ha hover desde un tipo específico de elemento, no solo desde cualquier elemento.

Hice una var global, cambiando a verdadero en la mouseleave de elementos específicos, en su caso, un elemento a. Luego, dentro de la función de desplazamiento, debe comprobar que es cierto.

Aquí hay una Demo

Edición: actualización de la demostración del violín con casos de borde al pasar de a elemento que no está directamente sobre el div .

Answer 6

Obtener la posición del elemento en mouseover y luego obtener el nombre de clase

<div id="wrapper">
<a href="#" class="anchorClass">A</a><div class="divClass">DIV</div>
</div>

$(''#wrapper'').mouseover(function(e) {
    var x = e.clientX, y = e.clientY,
        elementOnMouseOver = document.elementFromPoint(x, y);
        elementClass=$(elementOnMouseOver).attr(''class'');
    alert(elementClass);
});

JSFiddle: http://jsfiddle.net/ankur1990/kUyE7/

Si no desea aplicar esto solo en el div contenedor, sino en toda la ventana / documento, entonces puede reemplazar el contenedor con la ventana / documento

 $(window).mouseover(function(e){});

Answer 7

Puedes darle una oportunidad a esto:

window.onmouseover=function(e) {
        console.log(e.target.className);
};

Answer 8

Todo dependiendo de como lo quieras. Esto también podría ser una opción:

» Violín 1 «

Con algo más de detalle. Esto solo se mostrará como verdadero después de tomar el camino directo de a a div . (El pequeño espacio en blanco entre a y div .) Como en:

• a -> div TRUE
• a -> div -> white space in between -> div FALSE

» Violín 2 «

Podría aguantar. Esto también se mostrará como verdadero si uno va al pequeño espacio en blanco entre a y div , y luego regresa a div . Como en:

• a -> div -> white space in between -> div TRUE

var mode = 0;
$(window).on("mousemove", function(e) {
    if (e.target.className === "d1") {
        mode = 1;   
    } else {
        var cc = e.target.className;
        if (cc !== "d2" && mode) {
            var el = $(".d1"),
                d1 = {
                    x : el.offset().left,
                    y : el.offset().top,
                    w : el.width(),
                    h : el.height()
                },
                c = {
                    x  : e.pageX,
                    y  : e.pageY
                };
            if (c.x >= d1.x + d1.w && c.y >= d1.y && c.y <= d1.y + d1.h)
                mode = 2;
            else
                mode = 0;
        } else if (cc === "d2" && mode) {
            mode = 3;
        }
    }
    $("#status").html("Current: " + (mode == 3 ? "OVER" : "NOT OVER") + " from a" );
});

Answer 9

jsfiddle

$(document).on(''mouseover'', ''div,a,span'', function() {
    alert($(this).attr(''class''));
});