He visto esta sintaxis de jQuery:

if($(element).is(':hover')) { do something}

Ya que no estoy usando jQuery, estoy buscando la mejor manera de hacer esto en javascript puro.

Sé que podría mantener una variable global y set/unset que el uso de mouseover y mouseout, pero me pregunto si hay alguna manera de inspeccionar el elemento nativo de propiedades a través de la DOM en su lugar? Tal vez algo como esto:

if(element.style.className.hovered === true) {do something}

También, debe ser compatible con todos los navegadores.

  • He pasado 20 minutos buscando una manera de encontrar en este estado. Sospecho que sólo podría tener que establecer un propery o datos sobre el elemento como se cernía o no en un mouseover y mouseout, que es probablemente la primera cosa que usted y cualquiera de nosotros de leer esto se lo ha pensado.
  • Comprobar la jQuery código fuente. Yo creo que están usando mouseover y mouseout para flotar.
  • Yo no veo que sea referido a cualquier otro lugar, por lo que es probable que fn.hover no tiene nada que ver con :hover selector. Puedo estar equivocado, sin embargo.
  • No creo que jquery admite que, en primer lugar: $(element).is(':hover') // => Error: Syntax error, unrecognized expression: unsupported pseudo: hover jsfiddle
  • Una mierda solución: jsfiddle.net/czpkz/1
InformationsquelleAutor mulllhausen | 2013-02-10

4 Comentarios

  1. 6

    Primer lugar usted necesita para realizar un seguimiento de qué elementos se cernía sobre. He aquí una manera de hacerlo:

    (function() {
        var matchfunc = null, prefixes = ["","ms","moz","webkit","o"], i, m;
        for(i=0; i<prefixes.length; i++) {
            m = prefixes[i]+(prefixes[i] ? "Matches" : "matches");
            if( document.documentElement[m]) {matchfunc = m; break;}
            m += "Selector";
            if( document.documentElement[m]) {matchfunc = m; break;}
        }
        if( matchfunc) window.isHover = function(elem) {return elem[matchfunc](":hover");};
        else {
            window.onmouseover = function(e) {
                e = e || window.event;
                var t = e.srcElement || e.target;
                while(t) {
                    t.hovering = true;
                    t = t.parentNode;
                }
            };
            window.onmouseout = function(e) {
                e = e || window.event;
                var t = e.srcElement || e.target;
                while(t) {
                    t.hovering = false;
                    t = t.parentNode;
                }
            };
            window.isHover = function(elem) {return elem.hovering;};
       }
    })();
    • Editado para hacer uso de la matches función nativa (incluyendo proveedor de prefijos)
    • ¿Por qué esta es la respuesta correcta? La pregunta pide no usar el ratón encima?
    • Esta respuesta utiliza las funciones nativas donde esté disponible, volver a caer en mouseover/mouseout para mantener el «navegador compatible con» parte de la pregunta.
    • Hola no puedo conseguir que este código funcione, es bastante complicado, no estoy seguro de qué hacer. podría usted ayudarme a entender?
  2. 47

    Puede utilizar querySelector para IE>=8

    function isHover(e) {
        return (e.parentElement.querySelector(':hover') === e);
    }

    JS:

    function isHover(e) {
      return (e.parentElement.querySelector(':hover') === e);
    }
    
    
    var myDiv = document.getElementById('mydiv');;
    document.addEventListener('mousemove', function checkHover() {
      var hovered = isHover(myDiv);
      if (hovered !== checkHover.hovered) {
        console.log(hovered ? 'hovered' : 'not hovered');
        checkHover.hovered = hovered;
      }
    });

    CSS:

    .whyToCheckMe {position: absolute;left: 100px;top: 50px;}

    HTML:

    <div id="mydiv">HoverMe
      <div class="whyToCheckMe">Do I need to be checked too ?</div>
    </div>

    a reserva creo que es ok @Kolink respuesta.

    • Me gustaría extender este a !!(e.querySelector(":hover") || e.parentNode.querySelector(":hover") === e)
    • acaba de hacer anexample ¿por qué yo no
    • Hola sé que este es un viejo post, pero si usted todavía está allí, ¿te importaría explicar mí tu código? especialmente aquellas líneas de documento.addEventListener(‘mousemove’, function checkHover() { y consola.log(cernía ? ‘se cernía’ : ‘no se cernía’); nunca había visto esto antes, no sé cómo funciona
    • la última es ternar condición, google. La primera es simplemente evento, para escuchar, (trigger para comprobar el hover, podría ser setTimeout, pero mousemove se ve más relacionados)
  3. 6

    se me ocurrió que una manera de comprobar si un elemento se cernía sobre es establecer una nueva propiedad en css :hover y, a continuación, comprobar si la propiedad existe en javascript. no es una solución adecuada para el problema, ya que no está haciendo uso de un dom-nativo pase a la propiedad, pero es el más cercano y más mínima solución que se me ocurre.

    <html>
    <head>
    <style type="text/css">
    #hover_el
    {   
    border: 0px solid blue;
    height: 100px;
    width: 100px;
    background-color: blue;
    }   
    #hover_el:hover
    {   
    border: 0px dashed blue;
    }
    </style>
    <script type='text/javascript'>
    window.onload = function() {check_for_hover()};
    function check_for_hover() {
    var hover_element = document.getElementById('hover_el');
    var hover_status = (getStyle(hover_element, 'border-style') === 'dashed') ? true : false;
    document.getElementById('display').innerHTML = 'you are' + (hover_status ? '' : ' not') + ' hovering';
    setTimeout(check_for_hover, 1000);
    };
    function getStyle(oElm, strCssRule) {
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle) {
    strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle) {
    strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1) {
    return p1.toUpperCase();
    });
    strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
    };
    </script>
    </head>
    <body>
    <div id='hover_el'>hover here</div>
    <div id='display'></div>
    </body>
    </html>

    (función getStyle gracias a JavaScript obtener Estilos)

    si alguien puede pensar en una mejor propiedad de css para el uso como un indicador de solid/dashed por favor hágamelo saber. preferiblemente, la propiedad sería uno que rara vez se utiliza y no se puede heredar.

    • Es un poco chapucero, pero definitivamente me gusta más, como ser bastante lógico, simplisic y libre de compatibilidad preocupaciones.

Dejar respuesta

Please enter your comment!
Please enter your name here