mettez en surbrillance un élément du DOM au survol de la souris, comme d'inspecter n'

Nous avons un bookmarklet, et que l'utilisateur clique sur un bouton et une inspecter comme highligther besoin de coup de pied dans. Nous voulons que cela soit de la croix-navigateur.

Pour cela nous avons besoin de détecter l'élément DOM pendant le déplacement de la souris, et une fois que nous avons cet élément nous avons besoin pour mettre en surbrillance avec les CSS.

Nous avons des problèmes de détection de l'élément du DOM par déplacement de la souris, pouvez-vous nous guider comment c'est fait?

Une fois que nous avons cet élément du DOM, sur le clic de l'utilisateur nous avons besoin d'extraire XPath.

Je suis en train de corriger cela.
Avez-vous essayé quelque chose encore? Avez-vous le code?
Nous avons trouvé comment extraire le XPath d'un tag, voir mes autres questions.

OriginalL'auteur Ionut Flavius Pogacian | 2012-06-13

  1. 21

    Vous pouvez brancher mousemove sur document ou document.body, puis utilisez le target propriété de l'objet d'événement pour trouver l'élément supérieur de la souris est au-dessus. Puis en appliquant les CSS, il est probablement plus facile à faire par l'ajout d'une classe à elle.

    Mais je me demande si le :hover pseudo-classe peut vous faire économiser quelques problèmes...

    Si vous n'utilisez pas :hover, voici un exemple:

    (function() {
  var prev;

  if (document.body.addEventListener) {
    document.body.addEventListener('mouseover', handler, false);
  }
  else if (document.body.attachEvent) {
    document.body.attachEvent('mouseover', function(e) {
      return handler(e || window.event);
    });
  }
  else {
    document.body.onmouseover = handler;
  }

  function handler(event) {
    if (event.target === document.body ||
        (prev && prev === event.target)) {
      return;
    }
    if (prev) {
      prev.className = prev.className.replace(/\bhighlight\b/, '');
      prev = undefined;
    }
    if (event.target) {
      prev = event.target;
      prev.className += " highlight";
    }
  }

})();

    Vivre copie | source

    Ce :hover classe fonctionne pour n'importe quel code HTML de l'élément dom? Et fonctionne dans tous les navigateurs? Savez-vous si il est pris en charge par une version plus ancienne comme FF 3.5 et IE7?
    fonctionne avec n'importe quel élément dans la version IE7 ou supérieure (pas dans IE6, qui a pris en charge uniquement sur les ancres). Mais j'aurais du réfléchir attentivement à la façon de la structure de la CSS. Juste body *:hover { ... } ne serait probablement pas le faire, si vous voulez mettre en valeur uniquement de la supérieur de l'élément de la souris est au-dessus...
    Voici un jsfiddle qui pourrait montrer quelque chose de semblable, jsfiddle.net/MBujm Ignorer le jQuery, il n'est pas nécessaire.
    et T. J. Crowder-vous s'il vous plaît vérifier cette question connexe événement Mouseover ne granulés sur IE9 pour les sous-éléments, l'événement ne commence pas sur IE8
    C'est vraiment utile, mais j'ai besoin de l'iframe à l'intérieur ne fonctionne pas..merci de bien vouloir aider quelqu'un.

    OriginalL'auteur T.J. Crowder

  2. 4

    Avec l'aide de jquery, vous pouvez faire quelque chose comme ceci

    $('*').hover(
    function(e){
        $(this).css('border', '1px solid black');
        e.preventDefault();
        e.stopPropagation();
        return false;
    },function(e){
        $(this).css('border', 'none');
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
);

    Avec ce code dans votre bookmarklet, vous pouvez charger ce code

    javascript:function loadScript(src){f=document.createElement('script');if(f){f.setAttribute("type","text/javascript");f.setAttribute("src",src);document.getElementsByTagName("head")[0].appendChild(f);}};loadScript("yourscripturl");
    Savez-vous comment cela est fait avec du javascript? C'est un peu problématique de chargement de JQuery dans un bookmarklet.
    Je viens de modifier ma réponse, vous pouvez utiliser un bookmarklet le code pour charger un biget code qui peut contenir jquery et faire ce que vous voulez
    changement yourscripturl à la fin

    OriginalL'auteur Trinh Hoang Nhu